React基于craco自定义配置alias,less以及模块化，antd按需导入，环境变量

配置alias

1. 安装craco(react没有内置的vite.config或者vue.config，如果需要自定义配置webpack可以把eject暴漏出来(不建议)推荐通过craco配置额外的自定义webpack配置) npm i @craco/craco -D如果报错误加上--force
2. 创建craco配置文件craco.config.js

const path = require('path')
module.exports = {
     webpack: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '@hooks': path.resolve(__dirname, 'src/hooks'),
            '@components': path.resolve(__dirname, 'src/components'),
            '@assets': path.resolve(__dirname, 'src/assets'),
            '@router': path.resolve(__dirname, 'src/router'),
            '@store': path.resolve(__dirname, 'src/store'),
            '@utils': path.resolve(__dirname, 'src/utils'),
            '@views': path.resolve(__dirname, 'src/views'),
            '@api': path.resolve(__dirname, 'src/api'),
        },
    },

}

3. tsconfig.json配置路径提示(加在compilerOptions中)

"paths": {
      "@/*": ["src/*"],
      "@utils/*": ["src/utils/*"],
      "@views/*": ["src/views/*"],
      "@store/*": ["src/store/*"],
      "@hooks/*": ["src/hooks/*"],
      "@components/*": ["src/components/*"],
      "@api/*": ["src/api/*"],
      "@assets/*": ["src/assets/*"]
    }

4. 将craco覆盖package.json中的react-script

 "scripts": {
   "dev": " craco  start",
   "build": "craco  build",
 },

也可以npm run eject暴露cra的基础配置，但不推荐

less与模块化css

1. 安装less与loader以及craco需要的依赖npm i less less-loader craco-less craco-css-modules-D
2. 配置plugins

const CracoLessPlugin = require('craco-less')
const CracoCSSModules = require('craco-css-modules')

module.exports = {
plugins: [{
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: {},
                        javascriptEnabled: true,
                        module: true,
                    },
                },
            },
        },
        { plugin: CracoCSSModules },
    ],
}

3.如果使用了ts，在react-app-env.d.ts中声明模块化css的类型注释

declare module '*.module.less' {
  const classes: {
    readonly [key: string]: string
  }
  export default classes
  declare module '*.less'
}

antd按需导入

安装babel-plugin-importnpm i babel-plugin-import -D

module.exports = {
babel: {
        plugins: [
            [
                'import',
                {
                    libraryName: 'antd',
                    libraryDirectory: 'es',
                    style: 'css',
                },
            ],
        ],
    },
}

配置环境变量

1. 项目根目录建立.env文件(如.env.development .env.production)
2. 在.env文件中添加自定义环境变量

//必须以REACT_APP_开头，就像vue-cli必须以VUE_APP_开头，vite必须以VITE_开头一样,create-app必须以REACT_APP_开头
REACT_APP_BASE_URL=/api

3. 使用process.env.REACT_APP_BASE_URL使用(项目在启动时会自动根据你的命令start build...分发当前环境)
4. 如果需要ts对你的自定义环境变量添加类型，在react-app-env.d.ts文件中添加

declare namespace NodeJS {
  interface ProcessEnv {
    REACT_APP_BASE_URL: string
  }
}

5.webpack5安装node的核心模块后无法安装后直接使用，需要自己手动配置否则会报错(如果没有遇到则忽略)，安装npm i node-polyfill-webpack-plugin -D后在craco中追加配置实现自动化

module.exports = {
  resolve: {
   plugins: [new NodePolyfillPlugin() ]
}