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

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

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

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

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

当前回答

条件导入也可以通过三元和require()实现:

const logger = DEBUG ?Require ('dev-logger'): Require ('logger');

这个例子来自ES Lint全局要求文档:https://eslint.org/docs/rules/global-require

其他回答

在eval中隐藏它对我有用，在静态分析器中隐藏它……

if (typeof __CLI__ !== 'undefined') {
  eval("require('fs');")
}

条件导入也可以通过三元和require()实现:

const logger = DEBUG ?Require ('dev-logger'): Require ('logger');

这个例子来自ES Lint全局要求文档:https://eslint.org/docs/rules/global-require

不，你不能!

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

在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

推荐文章