不使用create-react-app，搭建React开发环境

2 年 ago

逸, 科

2 minutes

首先

在使用React创建Web应用程序时，我认为通常会使用create-react-app来设置环境。但是，当我们想要自定义webpack配置时，或者当create-react-app安装的react-scripts变得碍事时，我们该如何构建自定义环境呢？为了解答这些疑问，我在这里记录下了React环境配置的方法。

webpack和babel的引入

webpack是一个将多个文件打包成一个的工具，babel是一种工具，可以将使用ES6等新语法编写的JavaScript转换为任何浏览器都可以加载的形式。

我也安装了插件。

mkdir react-env
cd react-env
npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader file-loader url-loader webpack webpack-cli webpack-dev-server html-webpack-plugin

webpack和babel的配置

我会写一个使用webpack和babel的配置。

webpack的配置

让我们创建一个webpack.config.js文件。

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

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    port: 3000,
    contentBase: 'dist'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use:{
          loader: 'babel-loader'
        },
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'html/index.html'),

      filename: 'index.html'
    }),
  ]
};

entry属性用于设置要加载的文件。在使用create-react-app创建的应用程序中，它相当于index.js文件。output属性用于设置将与加载的文件相关联的代码整合到哪个文件中。在这里，我们设置它输出到dist文件夹下的bundle.js文件中。

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

使用webpack-dev-server时，需要设置要引用的文件夹和使用的端口号，以在本地环境中启动应用程序。


module.exports = {
  ...
  devServer: {
    port: 3000,
    contentBase: 'dist'
  },
  ...
}

在模块的规则中，需要设置要应用加载器的文件以及要使用的加载器。在这里，我们设置了将src文件夹中的js和jsx文件使用babel-loader进行转换，将图片文件使用url-loader进行转换。

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use:{
          loader: 'babel-loader'
        },
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
  ...
}

可以使用插件来扩展Webpack。这次我们引入了一个用于创建HTML文件的插件。我们需要在html文件夹下的index.html中添加代码来加载通过Webpack生成的bundle.js，并将其输出到output中。

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'html/index.html'),

      filename: 'index.html'
    }),
  ]
};

巴别塔的设置

在webpack.config.js文件中可以使用bael-loader来进行配置，但在这次中将其切割出来进行配置。

我们来创建一个.babelrc文件。

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

准备所需的文件夹和文件。

根据webpack配置，需要创建 src/index.js 作为构建的入口文件，构建后的文件将输出到 dist 文件夹中。还需要创建 dist 文件夹下的 html/index.html 文件作为生成的 HTML 文件的基础。

※index.js将在下一个部分中编写。

├── dist
├── html
│   └── index.html
├── package-lock.json
├── package.json
├── src
│   └── index.js
└── webpack.config.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Test</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

开发React应用程序。

安装所需的模块。

npm install --save react react-dom

在src/index.js中显示”Hello React”。

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello React</h1>,
  document.getElementById('root')
)

设置命令

使用 “npm start” 可以在本地环境中启动 React 应用程序，而使用 “npm run build” 可以构建 React 应用程序。

{
  ...
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --mode production --progress"
  },
  ...
}

最后

如果你能够独自创建React环境，那么你就可以轻松地进行服务器端渲染，而无需使用Next.js。请务必试用一次。