如何将 React-app-rewired 与 Customize-CRA 集成

Posted

技术标签:

【中文标题】如何将 React-app-rewired 与 Customize-CRA 集成【英文标题】:How to integrate React-app-rewired with Customize-CRA 【发布时间】:2019-08-22 05:16:02 【问题描述】:

我想通过 react-app-rewired 覆盖 Webpack 配置。但是我的项目是用 Ant 设计的,所以我必须使用 Customize-CRA 来导入 Babel 插件等。如何一起使用 React-app-rewired 和 Customize-CRA。

React-app-rewired 的 config-overrides.js 如下:

module.exports = function override(config, env) 
  config.module.rules = config.module.rules.map(rule => 
        if (rule.oneOf instanceof Array) 
            return 
                ...rule,
                oneOf: [
                    
                        test: /\.(svg|png|jpg|jpeg|gif|bmp|tiff)$/i,
                        use: [
                            
                                loader: 'file-loader',
                                options: 
                                    name: '[path][name]-[hash:8].[ext]'
                                
                            
                        ]
                    ,
                    ...rule.oneOf
                ]
            ;
        

        return rule;
    );

  return config;

Customize-CRA 的 config-overrides.js 如下:

const override, fixBabelImports, addLessLoader, addDecoratorsLegacy, disableEsLint = require('customize-cra');

module.exports = override(
  addDecoratorsLegacy(),
  disableEsLint(),
  fixBabelImports('import', 
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  ),
  addLessLoader(
    javascriptEnabled: true,
    modifyVars: '@primary-color': '#a50052',
  ),
);

谢谢。

【问题讨论】:

【参考方案1】:

我想我遇到了和你一样的问题。 custom-cra 覆盖将任意数量的覆盖函数作为参数。每个函数都被赋予配置作为它的第一个参数。把它想象成一个 compose 函数。将您现有的覆盖导出,将其放入您定义的函数中,我称为 myOverrides 之类的,然后使用您的覆盖函数作为参数之一导出自定义 cra 的覆盖。

之前:

module.exports = function override(config, env)
  // do stuff to config
  return config

之后:

function myOverrides(config) 
  // do stuff to config
  return config


module.exports = override(
  myOverrides,
  addDecoratorsLegacy(),
  disableEsLint(),
  fixBabelImports('import', 
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  ),
  addLessLoader(
    javascriptEnabled: true,
    modifyVars: '@primary-color': '#a50052',
  ),
);

【讨论】:

【参考方案2】:

在 customize-cra 之后放置 react-app-rewired 配置对我有用。如果我将一个对象分配给配置,它就不起作用,但如果我逐行修复配置,它就起作用。我确信有一个更优雅的解决方案。

module.exports = function override(config, env) 
    const APP = process.env.REACT_APP_APP
    const BRAND = process.env.REACT_APP_BRAND

    addWebpackAlias(
        ['@app-config']: path.resolve(__dirname, `./src/brands/$BRAND/app`),
    )

    config.entry = `./src/$APP/index.js`
    config.resolve.alias['@app-config'] = path.resolve(__dirname, `./src/brands/$BRAND`)
    config.resolve.modules = [
        path.join(__dirname, `src/brands/$BRAND`)
    ].concat(config.resolve.modules)


    return config
;

【讨论】:

【参考方案3】:

我从 ant design 文档中找到了一些提示:

const 
  override,
  fixBabelImports,
 = require("customize-cra");


module.exports = override( 
  fixBabelImports("import", 
    libraryName: "antd-mobile",
    style: 'css'
  )
);

参考:

https://mobile.ant.design/docs/react/use-with-create-react-app#Use-modularized-antd-mobile

【讨论】:

以上是关于如何将 React-app-rewired 与 Customize-CRA 集成的主要内容,如果未能解决你的问题,请参考以下文章

react-app-rewired的使用备注&&禁止生成.map(对应隐藏源码)

antd中按需加载使用react-app-rewired报错

react-app-rewired 修改 react 项目默认端口号

apache_conf react-app-rewired,添加配置config-overrides.js

node 和 react-app-rewired 修改 React 打包目录的流程

node 和 react-app-rewired 修改 React 打包目录的流程