如何有条件地导入ES6模块？

Question

我需要做一些事情，比如:

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

上面的代码无法编译;它抛出语法错误：...“导入”和“导出”只能显示在顶层。

我尝试使用System.import，如下所示，但我不知道系统来自哪里。这是一个最终没有被接受的ES6提案吗？该文章中指向“编程 API”的链接将我转储到一个已弃用的文档页面。

Answer 1

您不能有条件地导入，但可以做相反的事情：有条件地导出某些内容。这取决于您的用例，因此这种解决方法可能不适合您。

你可以做：

应用程序.js

import mockAPI from './mockAPI'
import realAPI from './realAPI'

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

我用它来模拟mixpanel等分析库，因为我目前不能有多个构建或我们的前端。不是最优雅的，但很有效。根据环境的不同，我只是在这里和那里有几个“如果”，因为在mixpanel的情况下，它需要初始化。

Answer 2

如果你愿意，你可以使用require。这是一种拥有条件要求语句的方法。

let something = null;
let other = null;

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

Answer 3

我们现在确实有ECMA的动态进口提案。这是在第 3 阶段。这也可以作为 babel 预设使用。

以下是根据您的情况进行条件渲染的方法。

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

这基本上是一个promise。promise的解决方案预计将包含该模块。该提案还具有其他功能，如多个动态导入、默认导入、js文件导入等。您可以在此处找到有关动态导入的更多信息。