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环境中，您几乎从不使用全局范围 - 所有模块代码都是严格模式代码，因此您必须努力在全局对象上创建变量。

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