TL; DR: использование сборщика по-прежнему является лучшим способом отправить / упаковать ваше приложение.
Это не только вопрос модуля. Это больше связано с топологией сервера и общим пакетом.
Например, у вас есть сторонний модуль npm
, который предоставляется как модуль ES, также известный как синтаксис import/export
. Обычно он устанавливается в папки node_modules
, как и его зависимости. Теперь вы собираетесь использовать этот модуль в своем коде, вы хотели бы использовать его как
import xyz from 'my-npm-module';
С приведенным выше простым оператором возникает несколько проблем. Вышеуказанный тип импорта: безотносительный импорт. Для Node.js или таких сборщиков, как Webpack или Rollup, это простой вопрос - заглянуть в папку node_modules
, начиная с текущего каталога и найти до раздела root.
Теперь в браузерах нет такое знание не относительного разрешения импорта (браузеры не используют разрешение модуля стиля узла). Итак, первый вопрос: как браузер узнает, где искать такие модули на сервере. Второй вопрос: предположим, что каким-то образом вы научите браузер использовать не относительные модули и следовать алгоритму разрешения стиля узла, вам все равно нужно будет упаковать всю папку node_modules
, включая подкаталоги. Это очень громоздкий процесс, который излишне увеличивает размер окончательной сборки приложения.
Это причины, по которым вам все еще нужно использовать такие сборщики, как Webpack и Browserify. В целях экономии вы можете пропустить Babel, если не хотите поддерживать старые движки JS. Однако, если вы действительно хотите использовать и отправлять модули ES в браузер, рассмотрите возможность использования Rollup.js
, который поддерживает формат вывода как ES module
, в отличие от Webpack UMD
или Common.js
.
Другая альтернатива, которую вы можно использовать System.js
+ JSPM
способ объединения приложений, где ES modules
- значения по умолчанию, но он не предлагает гибкости, как у Webpack или Rollup. Кроме того, есть новый бандлер - Parcel.js
, который не требует конфигурации и очень прост в использовании. Вы не заметите всех сложных ремней и свистков.
В конце концов, в реальном мире комплектация интерфейсов - это не просто JavaScript. Существуют и другие ресурсы, такие как файлы TS, файлы ReasonML, изображения, файлы SVG, которые вы, возможно, захотите перенести и связать с финальным пакетом с использованием расширенных оптимизаций, таких как Tree shaking, HMR (режим разработчика), где пакеты действительно превосходны.