作者:廖小廖童鞋 | 来源:互联网 | 2023-08-25 19:24
creat-react-app初始化项目后,我们对项目的启动是通过react-scripts实现的,项目开发过程中,如果需要引入对less支持,和高阶组件对装饰器的使用,我们需要在
creat-react-app 初始化项目后,我们对项目的启动是通过 react-scripts 实现的,项目开发过程中,如果需要引入对less 支持,和高阶组件对装饰器的使用,我们需要在webpack 中添加对此功能的支持,我们需要custom-cra 这个包,https://www.npmjs.com/package/customize-cra#documentation
看官方介绍,意思就是这个包扩展了create-react-app 功能 custom-cra 依赖 react-app-rewired 那我们首先要安装 这两个包
yarn add custom-cra react-app-rewired -dev
使用方法官网也有详细的介绍,就是在package.json 同级目录下新建 config-overides.js 进行配置,下面是官网的demo
const {
override,
addDecoratorsLegacy,
disableEsLint,
addBundleVisualizer,
addWebpackAlias,
adjustWorkbox
} = require(
"customize-cra"
);
const path = require(
"path"
);
module.exports = override(
addDecoratorsLegacy(),
disableEsLint(),
process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
addWebpackAlias({
[
"ag-grid-react$"
]: path.resolve(__dirname,
"src/shared/agGridWrapper.js"
)
}),
adjustWorkbox(wb =>
Object.assign(wb, {
skipWaiting:
true
,
exclude: (wb.exclude || []).concat(
"index.html"
)
})
)
);
到这里,配置就完成了