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

我需要做一些类似的事情:

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

上面的代码不能编译;它抛出SyntaxError:…“import”和“export”只能出现在顶层。

我尝试使用系统。导入如下所示，但我不知道系统来自哪里。是ES6提案最终没有被接受吗?那篇文章中的“程序化API”链接把我扔到了一个废弃的文档页面。

当前回答

在JS中有条件地导入和导出

const value = (
    await import(`${condtion ? `./file1.js` : `./file2.js`}`)
).default

export default value

其他回答

你可以通过下面的链接了解更多关于动态导入的知识

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports

我们现在有ECMA的动态进口建议。这是第三阶段。这也可作为babel预设。

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

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

这基本上返回了一个承诺。决议的承诺是有预期的模块。该建议还具有其他功能，如多个动态导入，默认导入，js文件导入等。您可以在这里找到关于动态导入的更多信息。

不，你不能!

然而，遇到这个问题应该让你重新思考如何组织代码。

在ES6模块之前，我们有使用require()语法的CommonJS模块。这些模块是“动态的”，这意味着我们可以根据代码中的条件导入新模块。-来源:https://bitsofco.de/what-is-tree-shaking/

我猜他们在ES6上放弃支持的原因之一是编译它非常困难或不可能。

看起来答案是，就目前而言，你不能。

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

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

看一下这个例子，可以清楚地理解动态导入是如何工作的。

动态模块导入示例

对导入和导出模块有基本的了解。

JavaScript模块Github

Javascript模块MDN

推荐文章