我听说 es6 中不允许动态导出/导入。
此网站使用示例
export default 5 * 7;
,就好像它是合法的静态导出一样。这看起来很合理,因为它显然计算出静态值 35,但我想知道现在到底什么才符合静态导出的条件。
此代码使用
export default Backbone.Router.extend({...});
,就好像它是合法的、静态的导出一样。这对我来说似乎很可疑,因为它对我来说似乎是动态导出(导出函数调用的结果)。
第二个示例仅导出函数调用的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
ES6 中的所有导出都是静态的,也就是说,它们的导出名称精确地解析为导出模块中的一个变量绑定,这可以在评估模块代码之前通过一次查看来确定。
模块无法通过执行代码动态添加或删除导出,导出名称列表由声明固定。
此变量是否保存常量或函数调用的结果并不重要,它是否保存原始值或对象也不重要。它甚至不需要是常量,变量的内容可能会随着时间而改变(参见示例here)。
来自
import
语句的所有导入也是静态的,这意味着您可以探索依赖关系图而无需执行任何模块代码。
动态导入是通过显式调用模块加载器来完成的。此类负载可能取决于模块的控制流,并且可能因运行而异。代码需要手动处理进程的异步和潜在的错误。
如果你做这样的事情
let awesome = 42;
export { awesome };
您正在导出到变量的绑定而不是值您可以稍后再执行此操作
import { awesome } from './awesome';
awesome = 100;
并且任何已导入 awesome
的位置现在都将获得更新的值,无论
awesome
何时导入参考:
https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/es6%20%26%20beyond/ch3.md#exporting-api-members
您还可以动态导入
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});
参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import