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 问题解决。

  • 相关阅读:
    呈现系统-组件间的通信方式(7)
    web项目中图标的前端处理方案
    ADO--数据访问技术
    canvas--绘制路径
    canvas--改变颜色
    canvas-在画布中画两个方块(一个空心一个实体)
    canvas--画布《第一步》
    拼图游戏【简单】
    判断字符串是否为空--string.Empty、string=""、s.length==0
    判断Char是否为数字
  • 原文地址:https://www.cnblogs.com/my-python-2019/p/12918788.html
Copyright © 2011-2022 走看看