使用react-app-rewired和customize-cra自定义项目配置
2023-09-14 08:59:53 时间
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(
// enable legacy decorators babel plugin
addDecoratorsLegacy(),
// disable eslint in webpack
disableEsLint(),
// add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
// add an alias for "ag-grid-react" imports
addWebpackAlias({
[
"ag-grid-react$"
]: path.resolve(__dirname,
"src/shared/agGridWrapper.js"
)
}),
// adjust the underlying workbox
adjustWorkbox(wb =>
Object.assign(wb, {
skipWaiting:
true
,
exclude: (wb.exclude || []).concat(
"index.html"
)
})
)
);
到这里,配置就完成了
相关文章
- Ddjango 多个app的urls配置
- 手机上哪款闹钟提醒APP好
- Hybrid App技术批量制作APP应用与跨平台解决方案
- [Angular] Upgrade existing Angular app to Progressive Web App
- thinkphp6:配置多app应用(thinkphp6.0.5 / php 7.4.9)
- uni-app:nvue:配置底部安全区域(hbuilderx 3.7.3)
- uni-app:配置访问接口时的跨域(hbuilderx: 3.6.18)
- 关于APP,原生和H5开发技术的争论
- Atitit 短信验证的漏洞 目录 1.1. APP读取短信1 1.2. 手机上访问的业务来说,短信验证码就没那么独立了1 1.3. 短信保管箱”1 1.4. 自动把短信备份到云端的功能。2
- just found out why the group by does not work for my app, but work for SCN exercise
- 适合做app的前端框架有哪些?webAPP&移动端App:react native、weex、flutter
- Android面试-Android性能优化和内存优化、APP启动速度一线大厂的实战案例解析
- ios xcode app被杀死了怎样打印调试 调试手动点开的APP 被系统唤醒的app的调试
- App Thinning(为什么苹果app上传时的包比在appStore下载下来的包大很多)
- 〖Python APP 自动化测试实战篇③〗- Mac系统下 appium 环境的配置搭建
- 〖Python APP 自动化测试实战篇⑩〗- app自动化总结与展望
- 个人或者企业怎么进行app开发?开发一款APP应用大概须要多少钱?
- Android原生APP内分享
- android app 的插件化、组件化、模块化开发