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中的main.js中来解决。 但是，由于某种原因，ESLint对此有所抱怨，这使我想知道IIFE是否不是保护全局名称空间的首选/推荐方法。

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

谢谢。

Answer 1

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

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

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

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