生产与测试代理 es6 导入

Question

所以我正在尝试在我的反应应用程序中导入一个基于布尔值的不同 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);

试过这个，它失败了。

Answer 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);

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

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

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

希望这有帮助。