1

如何仅在开发模式下有条件地导入模块（在我的情况下是axios-mock-adapter包）。此外，代码甚至不应该出现在生产包中。

我只想在开发过程中包含示例代码：

export const mockUpClient = (api: AxiosInstance): void => {
    // full api mocking, containing lots and lots of data
}

现在我根据以下条件导入模块：

if (process.env.NODE_ENV === 'development') {
    import("./apiMockAdapter").then((module) => {
        module.mockUpClient(api)
    })
}

该代码仍包含在 build中，但它不会在生产模式下执行。怎么可能从生产包中完全排除代码（当然在每次构建之前不注释掉代码）？

更新

上面的例子工作正常。在问这个问题之前，我还从其他地方导入了文件，这导致了这种行为。

接受的答案详细解释了 webpack 将如何捆绑代码和模块。

4

1 回答 1

1

基本上：

  • 使用 .从 create-react-app 中弹出npm run eject。您可能会担心维护负担，但如果您查看create-react-apprepo，您​​会发现 CRA 几乎没有有意义的变化，而且维护成本实际上更高。如果您坚持使用 CRA，请使用craco。
  • 转到webpack.config.js（或者craco.config.js如果使用 craco）
  • 如果应用程序在生产模式下运行，请添加一个externals字段

应该看起来像这样。在这个对象中添加一个外部部分：

externals: isEnvProduction ? {
   'myApiAdapter' : 'window' // or something else global
} : undefined,

这将映射import('myApiAdapter')到window生产版本，而不是将其包含在捆绑包中。

也就是说，webpack应该将动态导入视为将包分解为块的一个点，因此如果不查看您的实际代码就不清楚为什么包含它。将该文件设为外部应该绕过任何此类问题。

于 2021-05-09T17:20:07.633 回答