使用 craco 配置基于 create-react-app 的开发环境,开放部分webpack配置

谁适合阅读本篇文章

使用 create-react-app 创建项目，不想eject 项目但想对项目中wepback 进行自定义配置的开发者。

期望结果：antd 组件按需加载，支持less，支持 类装饰器 语法，支持webpack 别名并支持vscode 支持路径补全。
环境要求： Node.js
依赖版本：
create-react-app： 3.4.1
@craco/craco： 5.6.4
craco-less： 1.16.0
antd： 4.2.4
@babel/plugin-proposal-decorators： 7.8.3
babel-plugin-import： 1.13.0
注意：依赖版本是作者编写此文时安装的依赖版本，不一定要和此版本保持一致，如有出入请查阅相关文档。

配置步骤

1.首先，使用 create-react-app 创建一个项目，这里我们命名为 my-project

$ npx create-react-app my-project

2.进入项目目录，安装依赖

$ npm install antd -S
$ npm install @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D

3.根目录下创建 craco.config.js

const CracoLessPlugin = require('craco-less')
const path = require('path')

const pathResolve = pathUrl => path.join(__dirname, pathUrl)

module.exports = {
  webpack: {
    alias: {
      '@@': pathResolve('.'),
      '@': pathResolve('src'),
      '@assets': pathResolve('src/assets'),
      '@common': pathResolve('src/common'),
      '@components': pathResolve('src/components'),
      '@hooks': pathResolve('src/hooks'),
      '@pages': pathResolve('src/pages'),
      '@store': pathResolve('src/store'),
      '@utils': pathResolve('src/utils')
      // 此处是一个示例，实际可根据各自需求配置
    }
  },
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', style: true }],
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true
          }
        }
      }
    }
  ]
}

4.修改 package.json 中的 scripts

{
  "scripts":{
    "start": "set PORT=5000 && craco start",
    "build": "set GENERATE_SOURCEMAP=false && craco build",
    "test": "craco test"
  }
}

上面用到了两个环境变量：
PORT 启动端口
GENERATE_SOURCEMAP 打包时是否生成 sourceMap

5.根目录下创建 jsconfig.json(vscode)

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@@/*": ["./*"],
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@common/*": ["src/common/*"],
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@store/*": ["src/store/*"],
      "@utils/*": ["src/utils/*"]
    },
    "experimentalDecorators": true
  },
  "exclude": ["node_modules", "build"]
}