Как мне проще всего использовать модули ES6, а также npm модулей, используя синтаксис импорта / экспорта? - PullRequest
1 голос
/ 05 августа 2020

Модули ES7 сегодня почти повсеместно поддерживаются в браузерах. Старые решения этой проблемы, похоже, связаны с использованием babel с Browserify или Webpack. Это все еще самый простой и адекватно поддерживаемый способ использования синтаксиса импорта / экспорта ES6 как для локальных, так и для npm модулей? Дистиллировал его.

1 Ответ

1 голос
/ 05 августа 2020

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 (режим разработчика), где пакеты действительно превосходны.

...