Попытка использовать Javascript ES6-модули .... теперь другие функции сообщаются как неопределенные при запуске скрипта

Question

У меня странная проблема, и я не могу найти решение. Я пытаюсь сократить количество отдельных скриптов в моем проекте, отчасти потому, что они не всегда хорошо играют вместе. Но я хочу использовать более одного сценария, потому что кода много.

Я подумал, что может быть решение включить некоторые функции в модули и импортировать те функции, которые мне нужны для всего. Но использование модулей ставит целый ряд других проблем. В частности, некоторые функции, которые я запрограммировал в кнопки, теперь не работают, с ошибкой функции не определена в консоли. Некоторые, но не все, и я буду проклят, если увижу ошибки в HTML или Javascript. Все они работают на производственной площадке, как требуется (https://theautotard.com/EP/), но не в сборке разработки.

Единственная разница, кажется, модули. Импортированные функции работают нормально. Я продолжаю думать, что это может быть проблема строгого режима, и я исследовал это, но я не вижу проблемы. Я за пределами этого разочарован.

Я использую последние версии VS Code и Chrome. У кого-нибудь есть идеи?

Answer 1

Когда вы определяете функции или переменные на веб-странице или в сценариях <script src>, они имеют область действия window, то есть глобальную область. Но модули ES6 имеют свою область применения. Если вы сделаете это между <script> тегами на вашей веб-странице ...

function someFunction() {
  //do something
}

... эта функция будет доступна для вызова из любого места на странице - другие скрипты, атрибуты обработчика событий в вашем HTML и др. c. Определение точно такой же функции в модуле может показаться, что вы делаете то же самое, но это не так: функции (или переменные), определенные в модуле, относятся к этому модулю: на них можно ссылаться только изнутри этот модуль.

Если вы не export им. Итак, если вы напишите такой модуль ...

function someFunction() {
  //do something
}

export default someFunction; // <- this allows someFunction() to be imported elsewhere

... тогда вы можете импортировать этот модуль на свою веб-страницу и использовать там функцию. Без экспорта (и импорта в другое место) ваша функция не может быть вызвана откуда-либо, кроме как внутри этого модуля.

MDN - почти всегда хорошее место для получения solid, актуальной информации о чем-либо JavaScript -, CSS - или связанных с DOM; эту статью о модулях стоит прочитать: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Надеюсь, это поможет - вы далеко не единственный человек, которого это смутило, но этот обзор модулей работает для всеобщее преимущество; это делает конфликты кода (как я уже говорил, я думаю) гораздо менее вероятными, поскольку глобальная (window) область действия не загрязняется почти так же.