React使用craco配置项目及配置别名-不使用eject

须知:

• 适用于使用 create-react-app 创建项目,不想 eject 项目但想对项目中 wepback 进行自定义配置的开发者
• 使用 react-scripts4 需要将 craco 更新至 6.0 版本，如果用 react-scripts3 那就还用 craco5

可实现以下效果

• antd 组件按需加载
• 支持 less
• 支持 类装饰器 语法
• 支持 webpack 别名并支持 vscode 支持路径补全

操作步骤

1.安装依赖

yarn add antd -S
yarn add @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import​​​​​​​ -D

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

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

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

module.exports = {
  webpack: {
    alias: {
      '@': pathResolve('src'),
    }
  },
  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
          }
        }
      }
    }
  ]
}

3.修改 package.json 中的 scripts

参数说明
PORT 启动端口
GENERATE_SOURCEMAP 打包时是否生成 sourceMap

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

4.根目录下创建 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 配置基于 create-react-app 的开发环境