什么是 ES6 中的动态导出答案

【问题标题】：What qualifies as being a dynamic export in ES6什么是 ES6 中的动态导出
【发布时间】：2016-05-04 06:47:38
【问题描述】：

我听说 es6 中不允许动态导出/导入。

This website 使用示例export default 5 * 7;，就好像它是合法的静态导出一样。这似乎是合理的，因为它清楚地评估为 35 的静态值，但我想知道现在究竟什么才是静态导出。

This Code 使用 export default Backbone.Router.extend({...}); 就好像它是合法的、静态的导出一样。这对我来说似乎很可疑，因为它对我来说似乎是一个动态导出（导出函数调用的结果）。

【问题讨论】：

【解决方案1】：

第二个例子只导出函数调用的result，是静态的。该函数只调用一次，因此每次导入的结果总是相同的。

一个例子来说明：

f.js

function f() {
    return 2 * Math.random();
}

export default f(); // Is called, before the export is defined. Result: 1.23543

i1.js

import f from 'f';

console.log(f); // 1.23543

i2.js

import f from 'f';

console.log(f); // 1.23543 as well

【讨论】：

【解决方案2】：

在 ES6 中所有导出都是静态的，也就是说，它们的导出名称解析为导出模块中的一个变量绑定，这可以在评估模块代码之前通过单次查看来确定。

模块不能通过执行代码动态添加或删除导出，导出名称列表由声明固定。

这个变量是否保存一个常量或函数调用的结果并不重要，它是否保存原始值或对象也不重要。它甚至不需要是一个常量，变量的内容可能会随着时间而改变（参见示例here）。

来自import 语句的所有导入也是静态的，这意味着您可以在不执行任何模块代码的情况下探索依赖关系图。

动态导入是通过显式调用模块加载器来完成的。此类负载可能取决于模块的控制流，并且可能因运行而异。代码需要手动处理进程的异步性和潜在的错误。

【讨论】：

【解决方案3】：

您实际上可以通过命名导出进行“动态”导出。

如果你这样做

let awesome = 42;
export { awesome };

您正在导出绑定到变量而不是值

你可以稍后再做

import { awesome } from './awesome';
awesome = 100;

无论何时导入awesome，任何已导入awesome 的地方现在都将获得更新后的值

你也可以有动态导入

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

【讨论】：