仅在开发模式下包含 JS 模块/文件 更新

问题描述

如何有条件地仅在开发模式下导入模块（在我的例子中是 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)
    })
}

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

更新

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

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

解决方法

基本上：

• 使用 npm run eject 从 create-react-app 中弹出。您可能会担心维护负担，但如果您查看 create-react-app 存储库，您会发现 CRA 中几乎没有有意义的更改，而且维护费用实际上更高。如果您坚持使用 CRA，请使用 craco。
• 转到 webpack.config.js（如果使用 craco，则转到 craco.config.js）
• 如果应用在生产模式下运行，则添加 externals field

应该看起来something like this。在 this object 中添加外部部分：

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

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

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