生产与测试代理 es6 导入答案

【问题标题】：Production vs Test proxy es6 import生产与测试代理 es6 导入
【发布时间】：2018-08-22 04:35:21
【问题描述】：

所以我试图在我的反应应用程序中基于布尔值导入不同的 javascript 文件。

当我在开发模式下运行它时，我想导入我的 testProxy.js 文件，它只返回 json 数据。

当我在生产中运行应用程序时，我想使用 prodProxy.js，它通过 ajax 连接到我的生产应用程序并返回结果等。

我通过 webpack 实现了这一点：

new webpack.ProvidePlugin({ api: isDevBuild ? "./dev/api" : "./prod/api" }),.

然后在我的文件中我只是声明了 api。 declare var api: any（使用打字稿）

我不是很喜欢这个，我不知道其他方式。

我想要的是下面的

伪代码如下：

let _api = isDev ? import('devApi') : import('prodApi'); let someObject = new MyClass(_api);

试过了，失败了。

【问题讨论】：

【解决方案1】：

let _api = isDev ? import('devApi') : import('prodApi');
let someObject = new MyClass(_api);

这是不可能的：

您必须在 JavaScript 文件的顶层导入所有 ES6 模块。

您不能基于条件导入 ES6 模块。

你可以这样做：

let _api = isDev ? require('./devApi') : require('./prod/api');
let someObject = new MyClass(_api);

我不知道 isDev 指的是什么。假设您有一些节点/浏览器设置，并且 isDev 基于 process.env.DEVELOPMENT 传递的环境变量，这在客户端上将不可用。

您需要使用 webpack evironment 插件：https://webpack.js.org/plugins/environment-plugin/ 并将 env 变量添加到其中，以便您可以从客户端访问它。

旁注：在构建时添加，而不是在运行时添加。

希望这会有所帮助。

【讨论】：