config-overrides覆盖create-react-app配置,路径别名,按需加载antd

一、 config-overrides配置

通过react脚手架create-react-app创建的项目，无需eject暴露配置如何对项目进行配置

1. 根目录下创建config-overrides.js文件

2. 安装customize-cra依赖【安装了此依赖才能正常读取config-overrides.js文件】

   npm install react-app-rewired customize-cra -D
   or
   yarn add react-app-rewired customize-cra -D
   复制代码
   

3. 修改package.json里的启动配置【修改了启动项,在启动时才会去读取config-overrides.js文件】

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test",
       "eject": "react-scripts eject"
     },
   复制代码
   

二、 按需加载antd

1. 安装babel-plugin-import依赖

   npm install babel-plugin-import -D
   or
   yarn add babel-plugin-import -D
   复制代码
   

三、 完整config-overrides.js文件【后缀名只能是js】

1. antd按需加载、路径用@处理

   const { override, fixBabelImports, addWebpackAlias} = require('customize-cra')
   const path = require('path')
   
   module.exports = override(
     fixBabelImports('import', {
       libraryName: 'antd',
       libraryDirectory: 'es',
       style: 'css'
     }),
     addWebpackAlias({
       ['@']: path.resolve(__dirname, 'src')
     })
   )
   

四、 如果是typescript项目,改了别名之后,还需要在【tsconfig.json】中配置本地路径实别.注:此处的配置仅对TS检查生效.

1.【tsconfig.json】中新增"extends": "./paths.json"; 【扩展配置文件/paths.json】;

{
 "compilerOptions": {
   ...省略ts其它配置信息
 },
 "include": [
   "src"
 ],
 "extends": "./paths.json"
}

2.【paths.json】中配置别名路径.

{
 "compilerOptions": {
   "baseUrl": ".",
   "paths": {
     "@/*": [
       "src/*"
     ]
   }
 }
}

注:【path.json】并不是必须要配置到单独文件中,但未了避免一些脚手架不允许的项目配置【重置掉】自己的自定义配置,配置在外部更加保险.

五、此配置文件无法修改运行端口号和路径等【devServer】中的属性.

这个问题在19年就被提出了,官方在issue里面已经回复了.因为react脚手架一些配置的原因,这东西没有办法解决.

解决办法:在脚本命令中修改端口号

完...