前端工程化-React 项目搭建

前言

以前写过一篇如何从零开始创建 React 项目（三种方式),但是介绍的不太详细,这次重新写一篇文章，从头介绍如何用最新版本的 webpack、babel 等各种工具来搭建一个 React 项目，同时对用的对每一个包都做一下简要介绍。

基本安装

首先我们本地安装新建目录，初始化项目，同时安装 webpack。

新建目录

mkdir react-app

进入该目录下

cd react-app

使用 npm 初始化项目

npm init -y

安装 webpack 和 webpack-cli

npm install webpack webpack-cli --save-dev

• webpack 就没必要解释了
• webpack-cli 可以让我们在命令行中运行 webpack 相关的指令

管理资源和输出

首先先新建一个 index.html 和一个 index.js 文件，项目结构如下

|-- react-app
    |-- index.html
    |-- package-lock.json
    |-- package.json
    |-- src
        |-- index.js

然后新建一个配置文件webpack.config.js

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

众所周知,webpack 本身只支持 js 文件的打包,所以我们要使用 loader 和 plugin 来进行其他资源的管理。

html

首先安装html-webpack-plugin 来管理 html 文件

npm install html-webpack-plugin --save-dev

然后在webpack.config.js中做相应配置

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    }),
  ],
}

css

安装 style-loader 和 css-loader

npm install --save-dev css-loader style-loader

在 webpack.config.js 中配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}

• css-loader的作用可以理解为将所有的 css 整合起来
• style-loader是将整合起来的 css 用style标签的格式插入到页面当中去

静态资源

静态资源，例如图片、字体等资源的加载，可以使用file-loader或者url-loader 安装fiel-loader

npm install file-loader --save-dev

配置webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
}

• url-loadr是对file-loader的封装,使用url-loader可以配置将较小的图片直接用 base64 字符串引入，减少请求次数，在这里我们先直接使用file-loader

Babel

前端开发一般都要搭配Babel来进行，现在的Babel功能不只是将es6代码转成es5,而且可以让开发者使用更多的友好的js新的特性。

安装Babel

npm install babel-loader @babel/preset-env @babel/core @babel/preset-react --save-dev

• @babel/core Babel的核心包
• bable-loader Babel的loader,webpack中使用babel必须安装
• @babel/preset-env 和 @babel/preset-react 是Babel的两个预设，分别做了将es6转成es5和识别JSX的工作。

配置Babel,根目录建立.babelrc文件，然后写入以下配置

{
 "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 entry: './src/index.js',
 output: {
   filename: 'bundle.js',
   path: path.resolve(__dirname, 'dist'),
 },
 plugins: [
   new HtmlWebpackPlugin({
     filename: 'index.html',
     template: 'index.html',
   }),
 ],
 module: {
   rules: [
     {
       test: /\.css/,
       use: ['style-loader', 'css-loader'],
     },
     {
       test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
       use: ['file-loader'],
     },
     {
       test: /\.js$/,
       exclude: /node_modules/,
       use: {
         loader: 'babel-loader',
       },
     },
   ],
 },
}

react

react的安装

npm install react react-dom --save

最后是配置webpack启动scripts，在page.json中配置

安装webpack-dev-server

npm install webpack-dev-server --save-dev

在webpack.config.js中配置devServer属性

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: './dist',
    open: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
}

配置启动命令

"scripts": {
    "start": "webpack serve"
}

启动

之后写一段简单的react代码，就可以启动项目看下效果了

npm run start

总结

现在前端工程化可以说是前端必备的技能了，长期做业务开发，进行产品迭代，有时候会忽略了架构方面的知识，这也是需要前端注意的地方。 (PS:还差TypeScript如何引入，过几天补上)