ES6 导入重复项？

Question

我试图让我的代码（服务器端和客户端）尽可能模块化，这需要大量的导入和导出，但是我有一个未回答的问题。

我尝试从这里搜索，我阅读了热门博客文章，甚至观看了一些 YT 视频，但仍未完全解释清楚。我很想现在避免犯这个错误，并且避免以后重写我的逻辑。

---

文件1

import React from 'react';

// do something

文件2

import React from 'react';

// do something else

文件3

import File1 from './file1';
import File2 from './file2';

// do something with both

---

• 它足够聪明吗？我可以导入相同的吗 尽可能多的模块，它只导入一次？
• 如果我也需要 import React 到 File3 怎么办？它仍然足够聪明来处理这种情况吗？

我正在使用 Node、Babel 和 Webpack。

Answer 1

当您通过 Node 导入模块时（扩展名为 Webpack，因为它在解析模块时有效地遵循相同的规则），文件中的代码会执行一次，然后会缓存生成的导出。这意味着在您的两个文件中，React 将是对同一对象的引用。因此，您的假设实际上是正确的 - Webpack 确实足够聪明，不会在每次导入时执行 React 的完整源代码文件。

您可以很容易地自行测试 - 将 console.log() 添加到在您的应用程序的多个位置导入的模块中（确保它不在函数中或其他任何会延迟其执行的地方）。您会看到日志只发生一次，而不是每次导入一次！

更新：还值得注意的是，the spec for ES2015 modules 实际上也将此列为任何实施的要求：

如果正常完成，这个操作一定是幂等的。每次使用特定的referencingModule, specifier 对作为参数调用它时，它必须返回相同的模块记录实例。