JavaScript ES6模块：避免污染全局命名空间

Question

背景

在JavaScript中导入模块时，我们会使用导入的模块名称来污染全局名称空间：

foo.js

export foo() {..};
export const bar = 3.14;

index.js

import { foo, bar } from './foo.js';

---

题

在中index.js，foo并bar位于全局名称空间中，对吗？因此，假设我发布了此模块，有人在其HTML文件中使用了该模块，以及另一个还定义了变量foo和bar全局名称空间的脚本。那我们不会发生碰撞吗？

我想这可以通过将所有内容包装main.js在IIFE中来解决。但是，由于某种原因，ESLint对此有所抱怨，这使我怀疑IIFE是否不是保护全局名称空间的首选/推荐方法。

1. 全局名称空间会被foo和污染bar吗？
2. 如果是这样，我应该如何避免呢？

谢谢。

Answer 1

在JavaScript中导入模块时，我们会使用导入的模块名称污染全局命名空间

否。每个模块都有其自己的模块作用域，所有导入的绑定和顶级声明都存在于该模块作用域中。

在仅具有ES6模块的普通ES6环境中，您几乎从不使用全局范围-所有模块代码都是严格模式代码，因此您确实必须努力在全局对象上创建变量。

模块捆绑程序通常通过允许您声明一些导出以成为捆绑脚本中的全局变量来缓解这种情况，以便在使用其他脚本时也可以轻松地在页面中访问它们。