ES6导入重复？

Question

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

我试图从这里搜索，我阅读了热门的博客文章，甚至观看了几个YT视频，但它仍然没有完全解释。我很想避免现在发生这个错误，并避免以后重写我的逻辑。

---

File1中

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怎么办？它是否足够聪明来处理这种情况？

我使用节点，巴别和Webpack。

Answer 1

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

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