react-app-rewired

react-app-rewired 是一个可用于自定义 create-react-app 配置的工具。它通过覆盖默认配置来允许开发者在不弹出 eject 的情况下对 Create React App 进行个性化的调整。

安装

通过 npm 安装 react-app-rewired：

npm install react-app-rewired --save-dev

或者通过 yarn 安装：

yarn add react-app-rewired --dev

使用

在项目的根目录中，创建一个 config-overrides.js 文件。然后，你可以使用 react-app-rewired 提供的配置函数来修改 Create React App 的默认配置。

假设我们要将一个自定义的 Babel 插件添加到项目中，可以按照以下方式来修改配置：

const MyCustomBabelPlugin = require('my-custom-babel-plugin');

module.exports = function override(config, env) {
  // 在现有的 Babel 插件列表中添加自定义插件
  config.module.rules[2].oneOf.unshift({
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          plugins: [MyCustomBabelPlugin],
        },
      },
    ],
    exclude: /node_modules/,
  });

  return config;
};

将上述代码添加到 config-overrides.js 文件中后，react-app-rewired 会在启动开发服务器或创建生产构建时应用这些自定义配置。

结论

通过使用 react-app-rewired，我们可以更方便地自定义 Create React App 的配置，而无需执行 eject 操作。这使得我们能够快速地进行个性化调整，以满足项目的特定需求。

我们只需在项目的根目录中创建一个 config-overrides.js 文件，并编写适用于项目的自定义配置。然后，react-app-rewired 会在构建过程中应用这些配置。

希望你现在对 react-app-rewired 的使用有了更好的了解！