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

react

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

    })

  )

);

 到这里,配置就完成了

以上是 使用react-app-rewired和customize-cra自定义项目配置 的全部内容, 来源链接: www.h5w3.com/js/383309.html

回到顶部