基于create-react-app的优化和eslint配置

这是对现有的项目基于create-react-app做的优化

如果项目中使用了yarn eject

这种方式把配置暴露出来了，可以参考其他文章基于webpack做一些优化

使用@craco/craco来重写webpack配置

安装此插件 yarn add @craco/craco -D
更改package.json中的script指令

    
"scripts": {
- "start": "react-scripts start",
+ "start": "craco start",
- "build": "react-scripts build",
+ "build": "craco build"
- "test": "react-scripts test",
+ "test": "craco test"
}

在项目的根目录建立 craco.config.js, 配置文件如下:

注意某些模块需要自己安装

const path = require('path')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') // 分析模板依赖大小用的，我这边只配置了在开发时打开服务器
const CompressionWebpackPlugin = require('compression-webpack-plugin') // 打包时压缩代码成gz，如果服务器开启了gzip可以大大压缩大小
const CracoLessPlugin = require('craco-less') // 配合按需加载antd 和 修改主题使用
const WebpackBar = require('webpackbar') // 显示打包进度条用的
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') // 缓存用的，第二次打包和构建会极大提升速率

const resolve = (dir) => path.resolve(__dirname, dir)
const env = process.env.REACT_APP_ENV

const getAnalyzerConfig = (env) => {
  if (env === 'production') {
    return {
      analyzerMode: 'disabled'
    }
  }
}

module.exports = ({ env: webpackEnv }) => {
  return {
    webpack: {
      plugins: [
        new BundleAnalyzerPlugin(
          Object.assign(
            {},
            {
              analyzerPort: 'auto',
              openAnalyzer: webpackEnv !== 'production',
              generateStatsFile: false,
              defaultSizes: 'gzip',
              analyzerMode: 'server'
            },
            getAnalyzerConfig(webpackEnv)
          )
        ),
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
          threshold: 1024,
          minRatio: 0.8
        }),
        new WebpackBar({
          name: webpackEnv !== 'production' ? '正在启动' : '正在打包',
          color: '#fa8c16'
        }),
        new HardSourceWebpackPlugin()
      ],
      alias: {
        '@': resolve('src')
      },
      // configure这里可以拿到create-react-app的所有webpack配置，某些在外面修改不了的配置，可以在这配置
      configure: (webpackConfig, { env: webpackEnv, paths }) => {
        // console.log(env, paths)
        paths.appBuild = path.join(path.dirname(paths.appBuild), `build-${env}`)
        webpackConfig.output = {
          ...webpackConfig.output,
          ...{
            path: paths.appBuild
          }
        }
        webpackConfig.devtool = webpackEnv !== 'production' ? 'eval-source-map' : 'none'
        return webpackConfig
      }
    },
    // 下面是antd 的按需加载用的，不用每次导入css文件
    babel: {
      plugins: [
        [
          'import',
          {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true
          }
        ]
      ]
    },
    plugins: [
      {
        plugin: CracoLessPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              modifyVars: {
                '@primary-color': '#1890ff'
              }, //主题颜色
              javascriptEnabled: true
            }
          }
        }
      }
    ]
  }
}

添加eslint

安装所需要的依赖

yarn add eslint-config-prettier eslint-plugin-prettier prettier -D

去掉package.json 里面的eslint字段

- "eslintConfig": {
-    "extends": "react-app"
-  }

项目根目录增加.editorconfig .prettierrc .eslintrc.json .env文件

.editorconfig 文件

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf

[*.md]
trim_trailing_whitespace = true

.prettierrc 文件

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "endOfLine": "lf",
  "printWidth": 120,
  "bracketSpacing": true,
  "arrowParens": "always",
  "useTabs": false
}

.eslintrc.json 文件

{
  "extends": ["react-app", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error", { "endOfLine": "lf" }],
    "@typescript-eslint/no-unused-vars": ["error"],
    "jsx-quotes": [1, "prefer-single"],
    "no-class-assign": "error",
    "no-dupe-keys": "error",
    "no-dupe-args": "error",
    "no-duplicate-case": "error",
    "no-fallthrough": "error",
    "no-func-assign": "error",
    // "linebreak-style": [0, "windows"],
    "no-multi-spaces": "warn",
    "no-var": "error",
    "eqeqeq": [2, "allow-null"],
    "quotes": [1, "single"],
    "no-unreachable": "error",
    "no-multiple-empty-lines": [2, { "max": 2 }],
    "camelcase": "warn",
    "react/jsx-key": 2,
    "react/jsx-max-props-per-line": 0,
    "space-infix-ops": "error"
  }
}

.env文件

EXTEND_ESLINT=true

增加本项目vscode的设置，根目录下建立一个.vscode文件夹，在里面建立一个settings.json

settings.json文件

{
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
    ],
    "editor.formatOnSave": true,
    "javascript.format.enable": false,
    "typescript.format.enable": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }

需要注意安装和开启vscode的ESLint 和 Prettier - Code formatter 插件

====2020-12-31更新, 增加热更新插件====

注意这个craco-fast-refresh插件只在create-react-app v3中有效，v4版本已经内置支持

+ const { whenDev } = require('@craco/craco')
+ const fastRefreshCracoPlugin = require('craco-fast-refresh')

craco.config.js中的plugins的数组加入如下配置:

+ ...whenDev(() => [
+        {
+          plugin: fastRefreshCracoPlugin
+        }
+     ])