最终的安装执行：
npm i -D customize-cra react-app-rewired babel-plugin-import less less-loader less-vars-to-js antd-dayjs-webpack-plugin
npm i -D customize-cra react-app-rewired- 在根目录下新建文件
config-overrides.js，并添加以下内容：
const { override, addDecoratorsLegacy } = require('customize-cra')
module.exports = override(
addDecoratorsLegacy()
)
- 修改
package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
- 假如需要 antd 的按需导入，安装
babel-plugin-import，修改config-overrides.js：
const { override, addDecoratorsLegacy, fixBabelImports } = require('customize-cra')
module.exports = override(
addDecoratorsLegacy(),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
})
)
- 如若需要自定义主题，执行
npm i -D less less-loader less-vars-to-js，然后修改config-overrides.js：
const fs = require('fs')
const path = require('path')
const { override, addDecoratorsLegacy, fixBabelImports, addLessLoader } = require('customize-cra')
const lessToJS = require('less-vars-to-js')
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, './src/theme.less'), 'utf8')
)
module.exports = override(
addDecoratorsLegacy(),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: themeVariables,
})
)
- 使用 Day.js 替换 momentjs 优化打包大小，执行
npm i -D antd-dayjs-webpack-plugin，最终配置如下：
const fs = require('fs')
const path = require('path')
const { override,
addDecoratorsLegacy,
fixBabelImports,
addLessLoader,
addWebpackPlugin } = require('customize-cra')
const lessToJS = require('less-vars-to-js')
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, './src/theme.less'), 'utf8')
)
module.exports = override(
addDecoratorsLegacy(),
addWebpackPlugin(new AntdDayjsWebpackPlugin()),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: themeVariables,
})
)
