从零搭建React脚手架（Webpack5+Typescri

在当前前端开发的环境下，React已经成为了最流行的JavaScript库之一。搭建一个React脚手架是一个常见的需求，它可以帮助我们更好地管理项目，提高开发效率。本文将介绍如何从零开始搭建一个React脚手架，使用Webpack5、Typescript和Eslint。

为什么选择Webpack5

Webpack是一个模块打包工具，它可以将多个模块打包成一个文件。Webpack5是Webpack的最新版本，它带来了很多新的功能和改进。其中最重要的是支持WebAssembly和持久化缓存。

WebAssembly是一种新的二进制格式，可以在浏览器中运行原生代码。使用WebAssembly可以提高应用程序的性能和安全性。

持久化缓存是Webpack5的另一个重要功能。它可以将构建结果缓存到磁盘上，以便下次构建时可以更快地完成。这对于大型项目来说尤其有用，因为它们需要更长的时间来构建。

使用Typescript

Typescript是JavaScript的一个超集，它添加了静态类型检查和其他一些功能。使用Typescript可以使代码更加可靠和易于维护。

要在React项目中使用Typescript，需要安装相应的依赖项。可以使用以下命令：

npm install --save-dev typescript @types/react @types/react-dom @types/node

在项目根目录下创建一个tsconfig.json文件，用于配置Typescript编译器。以下是一个基本的配置文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

使用Eslint

Eslint是一个JavaScript代码检查工具，它可以帮助我们发现代码中的错误和潜在问题。使用Eslint可以使代码更加规范和易于维护。

要在React项目中使用Eslint，需要安装相应的依赖项。可以使用以下命令：

npm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

在项目根目录下创建一个.eslintrc.json文件，用于配置Eslint规则。以下是一个基本的配置文件：

{
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": [
    "@typescript-eslint",
    "react-hooks"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    "import/extensions": ["error", { ".ts": "never", ".tsx": "never" }],
    "import/prefer-default-export": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

搭建React脚手架

现在我们已经准备好使用Webpack5、Typescript和Eslint搭建React脚手架了。以下是一个基本的项目结构：

- src/
  - index.tsx
- package.json
- tsconfig.json
- webpack.config.js
- .eslintrc.json

在项目根目录下创建一个package.json文件，用于管理依赖项和脚本。以下是一个基本的package.json文件：

{
  "name": "react-starter",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "start": "webpack serve --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "",
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.15.0",
    "@types/react": "^17.0.30",
    "@types/react-dom": "^17.0.9",
    "@typescript-eslint/eslint-plugin": "^4.31.2",
    "@typescript-eslint/parser": "^4.31.2",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.25.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.3",
    "webpack": "^5.52.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.1.0"
  },
  "dependencies": {
    "@babel/runtime-corejs3": "^7.15.4",
    "@types/node": "^16.9.0",
    "@types/react-router-dom": "^5.3.2",
    "@types/webpack-env": "^1.16.0",
    "@types/yup": "^0.32.14",
    "@yup/schema": "^1.23.2",
    "axios": "^0.21.4",
    "react-router-dom": "^5.3.0"
  }
}

在webpack.config.js文件中配置Webpack。以下是一个基本的配置文件：

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

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',
                '@babel/preset-typescript',
              ],
              plugins: ['@babel/plugin-transform-runtime'],
            },
          },
          {
            loader: 'ts-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico',
    }),
  ],
};