javascript - 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有效地将此列为任何实现的要求:

This operation must be idempotent if it completes normally. Each time it is called with a specific referencingModule, specifier pair as arguments it must return the same Module Record instance.