zoukankan      html  css  js  c++  java
  • 使用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")
        })
      )
    );
    

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

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

  • 相关阅读:
    系统权限控制模型
    [Golang] 剑走偏锋 -- IoComplete ports
    Golang 正则匹配 -- regexp
    golang -- 字符串就地取反
    Hyperledger Fabric chaincode 开发(疑难解答)
    could not launch process: decoding dwarf section info at offset 0x0: too short
    win10 Ubuntu16 双系统
    7-8 哈利·波特的考试
    7-7 六度空间
    7-6 列出连通集
  • 原文地址:https://www.cnblogs.com/my-python-2019/p/12918788.html
Copyright © 2011-2022 走看看