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

JavaScript ES6 Modules: Avoid Polluting Global Namespace

背景

在 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. 如果是，我该如何避免？

谢谢。

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

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

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

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