如何在 React 应用程序中禁用警告叠加层？

Question

I\xe2\x80\x99m 使用react-app-rewired并且我想禁用每次编译时出现的 Typescript 警告覆盖。由于我不明白的原因，叠加层上出现了 VSCode Typescript 检查器未检测到的警告；webpack 是一个更严格的执行者（实际上比我想要的更严格）。

\n

不管怎样，我尝试过react-app-rewired start --no-client-overlay，我为我的config-overrides.js文件尝试过这个：

\n

module.exports = {\n    webpack: function (config, _) {\n        config.devServer = {\n            client: {\n                overlay: false\n            }\n        }\n        return config\n    }\n}\n

\n

两者都没有任何效果。知道如何禁用覆盖会很好，但同样好的解决方案是如何让编译器使用与 VSCode 相同的严格级别。

\n

Answer 1

如果您使用的是 Webpack v4 (CRA v4)，这应该是您正在寻找的文档https://v4.webpack.js.org/configuration/dev-server/#devserveroverlay

module.exports = {
    webpack: function (config, _) {
        config.devServer = {
            overlay: {
                warnings: true,
                errors: true
            }
        }
        return config
    }
}

您上面提供的配置适用于 Webpack v5 (CRA v5)，因此请确保您使用的是 CRA v5（并检查是否react-app-rewired支持该版本）。

Answer 2

create-react-app 生成一个单独的 Webpack 配置以与开发服务器一起使用，因此您需要使用 devServer 函数，如下所示：

module.exports = {
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      // Create the default config by calling configFunction with the proxy/allowedHost parameters
      const config = configFunction(proxy, allowedHost);

      config.client = {
        overlay: false,
      };

      return config;
    };
  },
};

来自react-app-rewired 文档：

Webpack 开发服务器

在开发模式下运行时，create-react-app 不会使用开发服务器（提供应用程序页面的服务器）的常用 Webpack 配置。这意味着您无法使用 config-overrides.js 服务器的普通 webpack 部分来更改开发服务器设置，因为这些更改不会应用。

相反，create-react-app 期望能够在需要时调用函数来生成 webpack 开发服务器。此函数提供了要在 webpack 开发服务器中使用的代理和 allowedHost 设置的参数（create-react-app 从 package.json 文件中检索这些参数的值）。

React-app-rewired 提供了通过使用 config-overrides.js 中 module.exports 对象中的 devServer 字段来覆盖此函数的功能。它为 devServer 函数提供一个参数，其中包含默认的 create-react-app 函数，该函数通常用于生成开发服务器配置（它无法提供配置的生成版本，因为 React-scripts 直接调用生成函数）。React-app-rewired 需要接收 create-react-app 的替换函数作为返回值，然后用于生成开发服务器配置（即返回值应该是一个新函数，它采用 proxy 和 allowedHost 两个参数本身返回一个 Webpack 开发服务器配置）。原始的react-scripts函数被传递到config-overrides.js devServer函数中，以便您可以自己轻松调用它，以根据create-react-app使用的默认值生成初始devServer配置。