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

javascript ecmascript-6 module

2022-08-30 00:07:43

我需要做这样的事情：

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

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

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

答案 1

我们现在确实有ECMA的动态导入提案。这是在第3阶段。这也可以作为巴别预设提供。

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

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

这基本上返回了一个承诺。承诺的解决方案有望具有该模块。该提案还具有其他功能，例如多个动态导入，默认导入，js文件导入等。您可以在此处找到有关动态导入的更多信息。

答案 2

如果您愿意，可以使用“需要”。这是一种具有条件要求语句的方法。

let something = null;
let other = null;

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