从零搭建React开发环境

README.md

1. 初始化

npm init

2. git 初始化

git init

3. 安装 React 和 ReactDOM

yarn add react react-dom

4. 安装 webpack 和 webpack-cli

yarn add webpack webpack-cli --dev

安装 webpack-dev-server

yarn add webpack-dev-server --dev

webpack 配置

webpack.config.js

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

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "status/js/[name].[contenthash:8].js",
    clean: true,
  },
  resolve: {
    extensions: [".js", ".json", ".jsx", ".wasm"],
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/i,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

5. babal 配置

安装 babel 核心代码和 cli 工具

yarn add @babel/core @babel/cli

babel 的预设

yarn add @babel/preset-env --dev

对 React 的预设

yarn add @babel/preset-react -dev

babel-loader

yarn add babel-loader --dev

babel.config.js

babel.config.js

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
};

6. webpack 的插件 plugin

html-webpack-plugin

7. .browerslistrc

.browerslistrc

>1%
last 2 versions
not dead

8. ESLint

yarn add eslint --dev

生成配置文件

npm init @eslint/config
# or
yarn create @eslint/config