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

我想通过 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;
}

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

谢谢你。

最佳答案

我想我遇到了和你一样的问题。 custom-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'},
  }),
);

关于reactjs - 如何将 React-app-rewired 与 Customize-CRA 集成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55448344/