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

谷梁弘深
2023-12-01

截至到 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. 进入项目目录,安装依赖
$ npm install antd -S
$ npm install @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import​​​​​​​ -D
  1. 根目录下创建 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. 修改 package.json 中的 scripts
{
  "scripts":{
    "start": "set PORT=5000 && craco start",
    "build": "set GENERATE_SOURCEMAP=false && craco build",
    "test": "craco test"
  }
}

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

  1. 根目录下创建 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"]
}

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

至此,项目便配置完成。

参考

2021-02-06更新

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

 类似资料: