基于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_ENVconst 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

1. 安装所须要的依赖

yarn add eslint-config-prettier eslint-plugin-prettier prettier -D复制代码

1. 去掉package.json 里面的eslint字段

- "eslintConfig": {-    "extends": "react-app"-  }复制代码

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

.editorconfig 文件

root = true[*]
indent_style = space
indent_size = 2charset = utf-8trim_trailing_whitespace = trueinsert_final_newline = trueend_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复制代码

1. 增长本项目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
    }
  }  

复制代码

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