我怎样才能有条件地导入一个ES6模块？

我需要做这样的事情：

if (condition) { import something from 'something'; } // ... if (something) { something.doStuff(); } 

上面的代码不能编译; 它会抛出SyntaxError: ... 'import' and 'export' may only appear at the top level 。

我尝试使用System.import如下所示，但我不知道System来自哪里。 这是ES6的build议，最终没有被接受吗？ 该文章中的“程序化API”链接将我转到不推荐的文档页面 。

Answer 1

我们现在有与ECMAdynamicimportbuild议。 这是在阶段3，这也可以作为巴贝尔预设 。

以下是根据你的情况做条件渲染的方法。

 if (condition) { import('something') .then((something) => { console.log(something.something); }); } 

这基本上是一个承诺。 承诺的解决scheme预计将有模块。 该提案还具有其他function，如多个dynamic导入，默认导入，js文件导入等。您可以在这里find更多有关dynamic导入的信息 。

Answer 2

如果你愿意，你可以使用require。 这是进行条件导入的唯一方法。

 if (condition) { var something = require('something'); var other = require('something').other; } if (something && other) { something.doStuff(); other.doOtherStuff(); } 

Answer 3

你不能有条件地导入，但你可以做相反的事情：有条件地导出一些东西。 这取决于你的用例，所以这个工作可能不适合你。

你可以做：

api.js

 import mockAPI from './mockAPI' import realAPI from './realAPI' const exportedAPI = shouldUseMock ? mockAPI : realAPI export default exportedAPI 

apiConsumer.js

 import API from './api' ... 

我用它来模拟像mixpanel等分析库，因为我目前不能有多个构build或我们的前端。 不是最优雅的，但作品。 我只是有一些'如果'在这里和那里取决于环境，因为在混合面板的情况下，它需要初始化。

Answer 4

看起来答案是，到目前为止，你不能。

http://exploringjs.com/es6/ch_modules.html#sec_module-loader-api

我认为其目的是尽可能地启用静态分析，而有条件的导入模块会打破这一点。 另外值得一提的是 – 我使用的是Babel ，而且我猜测System不被Babel支持，因为模块加载器API没有成为ES6标准。