JavaScript ES6 模块 : Avoid Polluting Global Namespace

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。那我们不会发生碰撞吗？

我想这可以通过将所有内容包装在 IIFE 中的 main.js 中来解决。但是，出于某种原因，ESLint 对此有所提示，这让我想知道 IIFE 是否不是保护全局命名空间的首选/推荐方法。

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

谢谢。

Answer 1

When importing modules in JavaScript, we pollute the global namespace with the imported module's name

没有。每个模块都有自己的模块范围，其中包含所有导入的绑定(bind)和顶级声明。

在只有 ES6 模块的普通 ES6 环境中，你几乎从不使用全局范围——所有模块代码都是严格模式代码，所以你真的必须努力在全局对象上创建一个变量。

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