使用react-app-rewired和customize-cra 个性化配置

2020-05-19 18:53:56 阅读：824 来源： 互联网

标签：wb less customize app react add 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")
    })
  )
);

　到这里，配置就完成了，我在做less 配置的时候碰到过如下问题

通过报错判断应该是less-loader 版本不对，于是将less-loader 降级 yarn install less-loader@5.0.0 问题解决。

标签：wb,less,customize,app,react,add,cra
来源： https://www.cnblogs.com/my-python-2019/p/12918788.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用react-app-rewired和customize-cra 个性化配置