仅在开发模式中包含 JS module/file
Include JS module/file only in development-mode
如何仅在开发 模式下有条件地导入模块（在我的例子中是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. In this object 添加一个外部部件：
externals: isEnvProduction ? {
'myApiAdapter' : 'window' // or something else global
} : undefined,
这将在生产版本中将 import('myApiAdapter') 映射到 window，而不将其包含在捆绑包中。
就是说，webpack 应该 将动态导入视为将包分解成块的点，因此如果不查看您的实际代码就不清楚为什么要包含它。将该文件设为外部应该可以绕过任何此类问题。
如何仅在开发 模式下有条件地导入模块（在我的例子中是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） - 如果应用 运行 处于生产模式，请添加
externalsfield
应该看看 something like this. In this object 添加一个外部部件：
externals: isEnvProduction ? {
'myApiAdapter' : 'window' // or something else global
} : undefined,
这将在生产版本中将 import('myApiAdapter') 映射到 window，而不将其包含在捆绑包中。
就是说，webpack 应该 将动态导入视为将包分解成块的点，因此如果不查看您的实际代码就不清楚为什么要包含它。将该文件设为外部应该可以绕过任何此类问题。