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

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

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

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


当前回答

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

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

其他回答

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

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

export default value

2020年更新

你现在可以调用import关键字作为函数(即import())在运行时加载一个模块。它返回一个Promise,解析为带有模块导出的对象。

例子:

const mymodule = await import('modulename');
const foo = mymodule.default; // Default export
const bar = mymodule.bar; // Named export

or:

import('modulename')
    .then(mymodule => {
        const foo = mymodule.default; // Default export
        const bar = mymodule.bar; // Named export
    });

看到https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import Dynamic_Imports

不,你不能!

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

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

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

我可以使用立即调用的函数和require语句来实现这一点。

const something = (() => (
  condition ? require('something') : null
))();

if(something) {
  something.doStuff();
}

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

动态模块导入示例

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

JavaScript模块Github

Javascript模块MDN