Модули 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 жалуется на это, заставляя меня задаться вопросом, не являются ли IIFEs предпочтительным / рекомендуемым подходом для защиты глобального пространства имен.

1. Будет ли глобальное пространство имен загрязнено foo иbar?
2. Если да, то как мне этого избежать?

Спасибо.

Answer 1

При импорте модулей в JavaScript мы загрязняем глобальное пространство имен именем импортированного модуля

Нет.Каждый модуль имеет свою собственную область видимости модуля, в которой находятся все импортированные привязки и объявления верхнего уровня.

В простой среде ES6 только с модулями ES6 вы почти никогда не используете глобальную область действия - весь код модуля строгкод режима, так что вам действительно нужно приложить усилия для создания переменной в глобальном объекте.

Связующие модули обычно облегчают это, позволяя вам объявить несколько экспортов, чтобы они стали глобальными переменными в связанном сценарии, так что выможет легко получить к ним доступ на вашей странице при использовании других скриптов.