javascript - ES6 : Conditional & Dynamic Import Statements

Question

有条件的

是否可以像下面这样有条​​件的导入语句？

if (foo === bar) {
    import Baz from './Baz';
}

我已经尝试了上面的方法，但是在编译时出现了以下错误(来自 Babel)。

'import' and 'export' may only appear at the top level

动态

是否可以像下面这样动态导入语句？

for (let foo in bar) {
    if (bar.hasOwnProperty(foo)) {
        import Baz from `./${foo}`;
    }
}

上面的代码在编译时从 Babel 收到相同的错误。

这可以做还是我遗漏了什么？

推理

我尝试这样做的原因是我有很多“页面”的导入，它们遵循类似的模式。我想通过使用动态 for 循环导入这些文件来清理我的代码库。

如果这不可能，那么是否有更好的方法来处理 ES6 中的大量导入？

Answer 1

我们现在确实有 ECMA 的动态导入提案。这是在第 2 阶段。这也可以作为 babel-preset 获得。 .

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

if (foo === bar) {
    import('./Baz')
    .then((Baz) => {
       console.log(Baz.Baz);
    });
}

这基本上返回了一个 promise 。 Resolution of promise 预计会有模块。该提案还包含多个动态导入、默认导入、js 文件导入等内容。您可以找到有关 dynamic imports here 的更多信息。 .