Основное использование

Если модуль просто выполняет код, и вам не нужна ссылка на модуль, вы можете импортировать в свой код js или тег script. Они одинаковые.

  • Код модуля ES выполняется только один раз. Это означает, что даже если вы поместите оба тега script в приведенный ниже пример в своем коде, сообщение «модуль работает» будет зарегистрировано только один раз.
  • 'use strict' по умолчанию
  • defer по умолчанию
  • Обратите внимание, что файлы модулей ES принято именовать как .mjs, чтобы их было легко прочитать человеку.

нпм против ES6

  • Синтаксис аналогичен импорту ES6, но это просто особый синтаксис, понятный только веб-пакету и т. д.
  • Отличия: обратите внимание, модули ES6 здесь — это собственное использование, а не пакетный вариант использования (например, накопительный пакет), который используется для поддержки старых браузеров.

нпм-пакет

Имя пакета npm

модули, установленные через npm install внутри папки node_modules

Прочитано webpack во время процесса локальной сборки и объединено в выходной файл.

Не беда — всегда поддержите. Потому что импорт не запускается в браузере. Запускается на машине разработчика в webpack.

ES6*

Путь к файлу js модуля ES

Файл по пути

Читается браузером. Файл загружается из пути непосредственно в браузере пользователя

Только новые браузеры поддерживают модули ES6. (подробнее см. ниже)

Используйте пакет npm способом ES6 (если этот пакет его поддерживает)

  • unpkg имеет экспериментальный флаг ?module, который загружает пакеты npm как модуль ES6. Таким образом, вы можете написать код вроде import some-package from '``http://unpkg.com/package-name@version/path/file.js?module``'
  • Или вы все еще можете установить пакеты npm в свою папку node_modules и загрузить файл напрямую, как import some-package from '``./node_module/package-name/path/file.js``'. Но это работает, только если пакет npm поддерживает модуль ES6. И ваше решение для развертывания/хостинга должно быть настроено на включение пакета в папку node_modules.
  • У Пола Кинлана есть статья об изящном способе преобразования любого пакета npm в модуль ES. https://paul.kinlan.me/importing-npm-modules-to-the-web-as-es6-modules/

Поддержка браузера

Только последние версии браузеров поддерживают модули ES6. Для старых браузеров, не поддерживающих модуль ES6, вам необходимо объединить их в один JS-файл без использования расширения import.

  • Как связать — это очень просто, вы можете использовать сборщики, такие как rollup.js. Просто: rollup my-main-js-that-uses-es6-modules.js --file bundle-for-old-browsers.js --format iife (Вы можете настроить флаги для своего приложения и, возможно, включить это в процесс сборки — gulp, скрипт npm и т. д.)
  • Как доставить конечным пользователям
  • К счастью, тег <script> обеспечивает хороший способ отличить модуль ES6.

Вот как работает код:

Вот как старые браузеры и современные браузеры загружают приведенный выше код:

  • В браузерах, поддерживающих модуль ES6, код внутри nomodule будет игнорироваться. И только type="module" будет выполнено. В результате пользователи, использующие современные браузеры, загружают модули ES6 в свои браузеры.
  • В браузере, который не поддерживает модуль ES6. Они не понимают type="module", поэтому просто игнорируют тег. И они также не знают о nomodule, поэтому они просто загружают и выполняют пакетный файл, как любой другой обычный файл js.
  • В обоих случаях будет загружен и выполнен только тот файл, который можно использовать в браузере. Таким образом, это не влияет на производительность загрузки и не вызывает дублирования выполнения кода.
  • Подробнее см. в https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
  • Еще одно преимущество использования type="module" заключается в том, что браузеры поддерживают модули ES6, а также поддерживают другой синтаксис ES6. Таким образом, вы можете использовать функции ES6, такие как const elements = Array.from(new Set([...array1, ...array2])), в своем коде без babel/polyfill. Вам нужно только запустить код через babel, когда вы связываете их со старыми браузерами.

Динамический импорт

Обычно import будет поднят, что означает, что ВСЕ зависимые модули будут загружены перед запуском любого кода.

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

Чтобы повысить производительность загрузки, вы также можете предварительно загрузить модуль, как и изображения и другие файлы.

Первоначально опубликовано на https://liyangguang.com 27 января 2020 г.