使用react-app-rewired和customize-cra自定义项目配置


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" )
     })
   )
);

 到这里,配置就完成了


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM