最终的安装执行:
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,
})
)
网友评论