ES6在多个位置导入文件，为什么文件加载一次？

Question

如果有一个名为common.js的公共文件，以及a.js，b.js等其他文件...

common.js

const Common = { property: 'initial' }
export { Common };

a.js

import { Common } from 'common.js';
Common.property = 'changed';

b.js

import { Common } from 'common.js';
console.log(Common.property);

首先，a.js运行并将common.js加载到内存中。

然后，b.js由引擎运行。

1. common.js是否会再次加载或使用内存中的现有common.js？
2. 如果其他common.js脚本更新xx.js，import将如何表现？

Answer 1

我假设您正在使用Node.js，因此import会在转换后变成require语句。

来自文档：

  

模块在第一次加载后进行缓存。这意味着（除其他外）每次调用require('foo')将获得完全相同的返回对象，如果它将解析为同一文件。

Source

明确回答你的问题：

1. 模块已缓存，因此您正在更改同一对象
2. 它将打印分配的最后一个值
   • 例如changed如果执行了a.js
   • 如果仅执行b.js，则会打印initial

在线试用here。

Answer 2

节点！= ES2015。

具体而言，尤其是ES2015的导入系统与Node的需求语法不同。

ES2015不允许您在运行时更改模块的形状 - 代码在内存中构建时是静态的。

关于实际实现可能做什么是值得怀疑的，但TL; DR是你不应该在模块加载之间更改文件或者可能发生坏事（TM）