Javascript ES6：条件和动态导入语句
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35914712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ES6: Conditional & Dynamic Import Statements
提问by Enijar
Conditional
有条件的
Is it possible to have conditional import statements like below?
是否可以有如下条件导入语句？
if (foo === bar) {
import Baz from './Baz';
}
I have tried the above but get the following error (from Babel) when compiling.
我已经尝试了上述方法，但在编译时出现以下错误（来自 Babel）。
'import' and 'export' may only appear at the top level
Dynamic
动态的
Is it possible to have dynamic import statements like below?
是否可以有如下动态导入语句？
for (let foo in bar) {
if (bar.hasOwnProperty(foo)) {
import Baz from `./${foo}`;
}
}
The above receives the same error from Babel whilst compiling.
上面在编译时从 Babel 收到相同的错误。
Is this possible to do or is there something I am missing?
这是可能的还是我遗漏了什么？
Reasoning
推理
The reason I am trying to do this is that I have a lot of imports for a number of "pages" and they follow a similar pattern. I would like to clean up my code base by importing these files with a dynamic for loop.
我尝试这样做的原因是我有很多“页面”的导入，并且它们遵循类似的模式。我想通过使用动态 for 循环导入这些文件来清理我的代码库。
If this is not possible then is there a better way to handle large number of imports in ES6?
如果这是不可能的，那么有没有更好的方法来处理 ES6 中的大量导入？
采纳答案by thecodeHyman
We do have dynamic imports proposal now with ECMA. This is in stage 2. This is also available as babel-preset.
我们现在有 ECMA 的动态导入提案。这是在第 2 阶段。这也可以作为babel-preset 使用。
Following is way to do conditional rendering as per your case.
以下是根据您的情况进行条件渲染的方法。
if (foo === bar) {
import('./Baz')
.then((Baz) => {
console.log(Baz.Baz);
});
}
This basically returns a promise. Resolution of promise is expected to have the module. The proposal also has things like multiple dynamic imports, default imports, js file import etc. You can find more information about dynamic imports here.
这基本上返回了一个承诺。承诺的决议有望有模块。该提案还包含多个动态导入、默认导入、js 文件导入等内容。您可以在此处找到有关动态导入的更多信息。
回答by Jonathan Petitcolas
You can't resolve dynamically your dependencies, as importsare meant for static analysis. However, you can probably use some requirehere, something like:
您无法动态解析您的依赖项，因为imports这是静态分析。但是，您可能可以require在这里使用一些，例如：
for (let foo in bar) {
if (bar.hasOwnProperty(foo)) {
const Baz = require(foo).Baz;
}
}
回答by LeeGee
As this question is highly-ranked by Google, it is worth pointing out that things have changed since the older answers were posted.
由于这个问题被谷歌高度评价，值得指出的是，自从旧的答案发布以来，情况已经发生了变化。
MDN has this entry under Dynamic Imports:
MDN 在Dynamic Imports下有这个条目：
The import keyword may be called as a function to dynamically import a module. When used this way, it returns a promise.
import('/modules/my-module.js') .then((module) => { // Do something with the module. }); // This form also supports the await keyword. let module = await import('/modules/my-module.js');
import 关键字可以作为函数调用来动态导入模块。以这种方式使用时，它会返回一个承诺。
import('/modules/my-module.js') .then((module) => { // Do something with the module. }); // This form also supports the await keyword. let module = await import('/modules/my-module.js');
A useful article on the subject can be found on Medium.
可以在Medium上找到有关该主题的有用文章。
回答by Henrik Vendelbo
Require will not solve your problem as it is a synchronous call. There are several options and they all involve
Require 不会解决您的问题，因为它是一个同步调用。有几种选择，它们都涉及
- Asking for the module you need
- Waiting for a promise to return the module
- 询问您需要的模块
- 等待承诺返回模块
In ECMA Script there is support for lazy loading modules using SystemJS. This of course isn't supported in all browsers, so in the meantime you can use JSPM or a SystemJS shim.
在 ECMA 脚本中，支持使用 SystemJS 的延迟加载模块。当然，并非所有浏览器都支持此功能，因此同时您可以使用 JSPM 或 SystemJS shim。
