使用 craco 配置基于 create-react-app 的开发环境_craco官网

截至到 2022年6月16日为止，CRA5 已经发布，然而 craco 的仍然未发布支持 CRA5 的稳定版本，并且官方似乎不像把精力放在 craco 上，因此推荐改用 react-app-rewired。另外 antd 对于 react18 的支持怎么样笔者没有测试过，建议去 Github 看看 issue 或者 raodmap。综上所述，文章中出现的部分第三方库已经过时，文章内容仅供参考。

谁适合阅读本篇文章

使用 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
1

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

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

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
          }
        }
      }
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

4. 修改 package.json 中的 scripts

{
  "scripts":{
    "start": "set PORT=5000 && craco start",
    "build": "set GENERATE_SOURCEMAP=false && craco build",
    "test": "craco test"
  }
}
1
2
3
4
5
6
7

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

5. 根目录下创建 jsconfig.json

{
  "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"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

对应 craco.config.js 中配置的别名即可，其他更详细配置可以参考 vscode 官方文档。

至此，项目便配置完成。

参考

• craco 配置
• less-loader 官方文档
• ant design 官方文档

2021-02-06更新

现在 CRA4 已经出了，他默认使用 react-scripts4 需要将 craco 更新至 6.0 版本，如果用 react-scripts3 那就还用 craco5 就可以了。