快来跟我一起学 React（Day4）

简介

上一节我们从 0 开始搭建了一个项目，完成了入口与出口的配置、ts 语法支持、react 基本库的安装、css 样式配置等工作，我们继续上一节的内容。

知识点

• Eslint（代码质量校验）
• eslint-webpack-plugin（Eslint webpack 插件）
• eslint-config-react-app（React 官方 eslint 配置）
• fork-ts-checker-webpack-plugin（ts 语法校验插件）
• Optimization（分包优化等）

准备

上一节所有的内容在 dev 分支：https://gitee.com/vv_bug/cus-react-demo/tree/dev，我们重新切一个新分支 dev-v1.0.0 。

我们安装好依赖，并且用 npm start 命令启动项目：

npm install --registry https://registry.npm.taobao.org && npm start

可以看到，浏览器自动打开了我们项目入口，并且在页面正常显示了 ”hello react111“ ，到这，我们的准备工作算是完成了。

Eslint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。

接下来我们来安装一下 ESLint 相关依赖：

安装 ESLint

Eslint 核心 API。

在工程目录 cus-react-demo 下执行以下命令安装：

npm install -D eslint --registry https://registry.npm.taobao.org

安装 eslint-webpack-plugin

Eslint 在 Webpack 中的插件。

在工程目录 cus-react-demo 下执行以下命令安装：

npm install -D eslint-webpack-plugin --registry https://registry.npm.taobao.org

安装 eslint-config-react-app

React 官方提供的 Eslint 配置。

在工程目录 cus-react-demo 下执行以下命令安装：

npm install -D eslint-config-react-app --registry https://registry.npm.taobao.org

安装 @typescript-eslint/eslint-plugin

ESLint 中的 ts 插件。

在工程目录 cus-react-demo 下执行以下命令安装：

npm install -D @typescript-eslint/eslint-plugin --registry https://registry.npm.taobao.org

安装 @typescript-eslint/parser

ESLint 中的 ts 语法解析器。

在工程目录 cus-react-demo 下执行以下命令安装：

npm install -D @typescript-eslint/parser --registry https://registry.npm.taobao.org

安装 typescript

ts 语法核心库。

在工程目录 cus-react-demo 下执行以下命令安装：

npm install -D typescript --registry https://registry.npm.taobao.org

安装 eslint-plugin-import

Eslint 中对 EsModule 导入导出的规范插件。

在工程目录 cus-react-demo 下执行以下命令安装：

npm install -D eslint-plugin-import --registry https://registry.npm.taobao.org

安装 eslint-plugin-flowtype

Eslint 中对 flow 语法规范插件。

在工程目录 cus-react-demo 下执行以下命令安装：

npm install -D eslint-plugin-flowtype --registry https://registry.npm.taobao.org

安装 eslint-plugin-jsx-a11y

安装 eslint-plugin-react-hooks

安装 eslint-plugin-react

安装 babel-eslint

在工程目录 cus-react-demo 下执行以下命令安装：

npm install -D eslint-plugin-jsx-a11y eslint-plugin-react-hooks  eslint-plugin-react babel-eslint --registry https://registry.npm.taobao.org

总算是安装完毕了，其实这些都是 React 官方要求的一些 Eslint 插件，都是在 eslint-config-react-app 中定义要求的，每一个具体什么功能我就不一一分析了，小伙伴自己去官网查看哦，童鞋们平时也不需要刻意去记这些东西，直接 copy 然后安装即可，ESLint 依赖我们是安装完毕了，下面我们来给项目配置一下 ESLint。

首先找到 webpack 配置文件 webpack.config.js，然后添加 eslint-webpack-plugin：

const path = require('path');
const config = new (require('webpack-chain'))();
const isDev = process.env.NODE_ENV === 'development'; // 判断是否是开发环境
config
    .target('web')
    .context(path.resolve(__dirname, '.')) // webpack 上下文目录为项目根目录
    .entry('app') // 入口文件名称为 app
        .add('./src/main.tsx') // 入口文件为 ./src/main.tsx
        .end()
    .output
        .path(path.join(__dirname, './dist')) // webpack 输出的目录为根目录的 dist 目录
        .filename(isDev ? '[name].[hash:8].js' : '[name].[contenthash:8].js') // 打包出来的 bundle 名称为 "[name].[contenthash:8].js"
        .publicPath('/') // publicpath 配置为 "/"
        .end()
    .resolve
        .extensions.add('.js').add('.jsx').add('.ts').add('.tsx').end() // 添加后缀自动解析
        .end()
    .module
        .rule('ts') // 配置 typescript
            .test(/\.(js|mjs|jsx|ts|tsx)$/)
            .exclude
                .add(filepath => {
   
                    // Don't transpile node_modules
                    return /node_modules/.test(filepath)
                })
                .end()
            .use('babel-loader')
                .loader('babel-loader')
                .end()
            .end()
        .rule('sass') // sass-loader 相关配置
            .test(/\.(sass|scss)$/) // Sass 和 Scss 文件
            .use('extract-loader') // 提取 css 样式到单独 css 文件
                .loader(require('mini-css-extract-plugin').loader)
                .end()
            .use('css-loader') // 加载 css 模块
                .loader('css-loader')
                .end()
            .use('postcss-loader') // 处理 css 样式
                .loader('postcss-loader')
                .end()
            .use('sass-loader') // Sass 语法转 css 语法
                .loader('sass-loader')
                .end()
            .end()
        .end()
    .plugin('extract-css') // 提取 css 样式到单独 css 文件
        .use(require('mini-css-extract-plugin'), [
            {
   
                filename: isDev ? 'css/[name].css': 'css/[name].[contenthash].css',
                chunkFilename: isDev ? 'css/[id].css': 'css/[name].[contenthash].css',
            },
        ])
        .end()
    .plugin('html') // 添加 html-webpack-plugin 插件
        .use(require('html-webpack-plugin'), [
            {
   
                template: path.resolve(__dirname, './public/index.html'), // 指定模版文件
                chunks: ['app'], // 指定需要加载的 chunk
                inject: 'body', // 指定 script 脚本注入的位置为 body
            },
        ])
        .end()
    .plugin('eslint') // 添加 eslint-webpack-plugin 插件
        .use(require('eslint-webpack-plugin'), [
            {
   
                // Plugin options
                extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
                eslintPath: require.resolve('eslint'),
                failOnError: !isDev,
                context:</