Тред о разработке на ES-модулях в браузерах.
Небольшое предисловие: Polymer всегда продвигал идею bundler-free разработки и HTML Imports в нее хорошо вписывались. Компоненты и целые приложения было принято разрабатывать без webpack.
Polymer 1 был полностью написан на ES5, поэтому Babel тоже не требовался — достаточно было поднять nginx. Идиллию нарушал режим "F5 monkey" и секунды ожидания обновления страницы.
Кстати, еще команда Polymer пыталась продвигать идею HTTP/2 server push с помощью prpl-server. Популярности этот подход не приобрел, а теперь HTTP/2 push и вовсе удаляют из Chrome.
groups.google.com/a/chromium.org…
К моменту выхода Polymer 3 в 2017 году все основные браузеры реализовали поддержку ES-модулей. Переход на них был логичным решением, позволяющим не зависеть от бандлеров и в дальнейшем.
polymer-project.org/blog/2017-08-2…
На сегодняшний день ES-модули имеют более 90% поддержки. Они реализованы везде, кроме IE11 — для него многие советуют собирать отдельный ES5-бандл с атрибутом nomodule.
caniuse.com/es6-module
Единственная проблема — отсутствие поддержки bare module specifiers, стиля импортов Node.js. Браузеры понимают только относительные пути к файлам. Об этом написал Damien Seguin.
medium.com/@dmnsgn/es-mod…
В будущем эту проблему планируется решить с помощью Import Maps. Этот черновик предложил Domenic Denicola из Google, недавно о нем также позитивно высказались представители Mozilla.
github.com/WICG/import-ma…
Полифилл пропозала Import Maps для браузеров с поддержкой ES-модулей предоставляет пакет ES Module Shims.
npmjs.com/package/es-mod…
Две статьи о разработке на ES-модулях написал Lars Den Bakker из проекта Open Web Components. В первой из них он описывает их синтаксис, в том числе dynamic imports и import.meta.
dev.to/open-wc/develo…
Вторая часть статьи посвящена проекту es-dev-server. Это сервер для локальной разработки на Koa, который поддерживает ES-модули и предоставляет удобную систему плагинов.
dev.to/open-wc/develo…
es-dev-server пользуется популярностью среди разработчиков веб-компонентов на lit-element. Команда Polymer рекомендует его как замену утилиты polymer-cli, поддержка которой прекращена.
Новая версия es-dev-server получила название Web Dev Server. Он поддерживает некоторые плагины Rollup, а также предоставляет плагин на базе esbuild для компиляции TypeScript на лету.
modern-web.dev/docs/dev-serve…
Есть и другие похожие инструменты. Пожалуй, самый известный — Snowpack, который разрабатывает Fred K. Schott. Между прочим, в прошлом он работал над бандлером и CLI в команде Polymer.
snowpack.dev
Идея Snowpack в двух словах — запустить Rollup один раз после npm install, скомпилировать все зависимости в папку web_modules и далее подключать их оттуда, используя относительные пути.
С выходом версии 2.0 Snowpack превратился в систему сборки с поддержкой TypeScript, JSX, React, Vue и Svelte и бандлером для продакшна. Подробнее можно почитать в анонсе релиза.
snowpack.dev/posts/2020-05-…
Кроме Snowpack, Fred K. Schott также запустил Skypack — поисковую систему и CDN для пакетов, поддерживающих ES-модули. Проекту уже больше года, до ребрендинга он носил название Pika.
skypack.dev
Опытом разработки на ES-модулях с использованием Snowpack поделился Bryan Braun. В статье описаны ряд аспектов: зависимости, CSS, кэширование. Отдельно упомянуты плюсы и минусы.
bryanbraun.com/2020/10/23/es-…
As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs with hot reload. Now it's almost 6AM and I have PoC working. The hot reload is so fast it's near instant.
Теперь еще об одном проекте. В апреле идеей разработки на ES-модулях загорелся Эван Ю. Отсчет можно вести с этого твита. Ради этого проекта Эван даже отвлекся на время от работы над Vue 3.
twitter.com/youyuxi/status…
@youyuxi seems you got quite inspired by es-dev-server 🤗 is there maybe room to collaborate? having full support for vue within es-dev-server via a middleware or a "plugin" would certainly sounds great 💪 now it seems more like becoming a "fork" with baked in vue features? 🤔 pic.twitter.com/sQdHednPCj
Дальше, по-видимому, Эван увидел мой ретвит, где я упомянул es-dev-server. Вскоре в его проекте появились заимствованные оттуда идеи, вроде использования es-module-lexer и lru-cache.
twitter.com/daKmoR/status/…
Сегодня Vite находится в стадии release candidate. Его документация содержит упоминания es-dev-server и Snowpack с обзором отличий в решаемых задачах и используемых подходах, прежде всего HMR.
github.com/vitejs/vite#ho…
Кстати о HMR: авторы Vite и Snowpack при участии Jovi De Croock (Preact) работают над черновиком реализации соответствующего API для разработки на ES-модулях на основе import.meta.
github.com/snowpackjs/esm…
Замечу, что эта спецификация HMR имеет ряд отличий от реализации Hot Module Replacement в webpack. Их сравнение приводит Tobias Koppers (автор webpack) в своем комментарии к этому issue.
github.com/snowpackjs/esm…
Недавно экспериментальная поддержка HMR на основе этой спецификации появилась также и в Web Dev Server в качестве плагина. Советую взглянуть на примеры в документации.
modern-web.dev/docs/dev-serve…
До сих пор я говорил об инструментах. Но есть и еще один момент: многие пакеты в npm до сих пор не имеют ESM-версии. В качестве возможного решения Joel Denning создал проект esm-bundle.
medium.com/@joeldenning/a…
В рамках esm-bundle для некоторых популярных пакетов настроена автоматическая публикация. Вот, например, версия Chai на ES-модулях, которую мы в Vaadin используем с Web Test Runner.
npmjs.com/package/@esm-b…
Также стоит упомянуть утилиту Dual Publish от Андрея Ситника. Она помогает настроить публикацию ESM и CommonJS версий.
github.com/ai/dual-publish
Подводя итоги, скажу, что на сегодняшний день ES-модули можно использовать не только как compilation target, но и в процессе разработки. Думаю, этот подход будет развиваться и дальше.
@jsunderhood для всех интересующихся esm в браузерах, мы недавно создали канал на дискорде, приходите похоливарить: discord.gg/sDcJydJ
В комментариях поделились ссылкой на дискорд о ES-модулях.
twitter.com/vovacodes/stat…