Reactjs 如何将React应用程序重新布线与定制CRA集成

我想通过react应用程序重新布线来覆盖网页包配置。但我的项目使用Ant design，所以我必须使用Customize CRA导入Babel插件等。如何使用React应用程序重新布线和Customize CRA

React应用程序的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;
}

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'},
  }),
);

自定义CRA的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;
}

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'},
  }),
);

---

谢谢。

在自定义cra为我工作后，将react应用程序重新布线配置。但是，如果我将一个对象分配给config，它将不起作用，但是如果我逐行修复config，它将起作用。我相信有一个更优雅的解决方案

module.exports=函数覆盖（配置，环境）{
const APP=process.env.REACT\u APP\u APP
const BRAND=process.env.REACT\u APP\u BRAND
AddWebPackageAlias({
['@app config']：path.resolve（`src/brands/${BRAND}/app`），
})
config.entry=`./src/${APP}/index.js`
config.resolve.alias['@app config']=path.resolve（uu dirname，`./src/brands/${BRAND}`）
config.resolve.modules=[
join（uu dirname，`src/brands/${BRAND}`）
].concat（config.resolve.modules）
返回配置
};我从ant设计文档中找到了一些提示：

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


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

参考：

我想我遇到了和你一样的问题。自定义cra覆盖将任意数量的覆盖函数作为参数。每个函数的第一个参数都是config。将其视为一个组合函数。将您现有的覆盖导出，将其放入您定义的函数中，我称之为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'},
  }),
);