Разработка на ES-модулях в браузерах
Тред из четвёртого дня моей недели в @jsunderhood.
Тред о разработке на ES-модулях в браузерах.
— jsunderhood (@jsunderhood) November 12, 2020
Небольшое предисловие: Polymer всегда продвигал идею bundler-free разработки и HTML Imports в нее хорошо вписывались. Компоненты и целые приложения было принято разрабатывать без webpack.
— jsunderhood (@jsunderhood) November 12, 2020
Polymer 1 был полностью написан на ES5, поэтому Babel тоже не требовался — достаточно было поднять nginx. Идиллию нарушал режим "F5 monkey" и секунды ожидания обновления страницы.
— jsunderhood (@jsunderhood) November 12, 2020
Кстати, еще команда Polymer пыталась продвигать идею HTTP/2 server push с помощью prpl-server. Популярности этот подход не приобрел, а теперь HTTP/2 push и вовсе удаляют из Chrome.https://t.co/Nu81zJG00w
— jsunderhood (@jsunderhood) November 12, 2020
К моменту выхода Polymer 3 в 2017 году все основные браузеры реализовали поддержку ES-модулей. Переход на них был логичным решением, позволяющим не зависеть от бандлеров и в дальнейшем.https://t.co/HbBJPjdwCJ
— jsunderhood (@jsunderhood) November 12, 2020
На сегодняшний день ES-модули имеют более 90% поддержки. Они реализованы везде, кроме IE11 — для него многие советуют собирать отдельный ES5-бандл с атрибутом nomodule.https://t.co/bYH8fomWDP
— jsunderhood (@jsunderhood) November 12, 2020
Единственная проблема — отсутствие поддержки bare module specifiers, стиля импортов Node.js. Браузеры понимают только относительные пути к файлам. Об этом написал Damien Seguin.https://t.co/8pZgbh0RwT
— jsunderhood (@jsunderhood) November 12, 2020
В будущем эту проблему планируется решить с помощью Import Maps. Этот черновик предложил Domenic Denicola из Google, недавно о нем также позитивно высказались представители Mozilla.https://t.co/RED2Vwf3Ko
— jsunderhood (@jsunderhood) November 12, 2020
Полифилл пропозала Import Maps для браузеров с поддержкой ES-модулей предоставляет пакет ES Module Shims.https://t.co/DolhFNNwQi
— jsunderhood (@jsunderhood) November 12, 2020
Две статьи о разработке на ES-модулях написал Lars Den Bakker из проекта Open Web Components. В первой из них он описывает их синтаксис, в том числе dynamic imports и import.meta.https://t.co/g3zsjSRg7U
— jsunderhood (@jsunderhood) November 12, 2020
Вторая часть статьи посвящена проекту es-dev-server. Это сервер для локальной разработки на Koa, который поддерживает ES-модули и предоставляет удобную систему плагинов.https://t.co/F8VLV9dwUI
— jsunderhood (@jsunderhood) November 12, 2020
es-dev-server пользуется популярностью среди разработчиков веб-компонентов на lit-element. Команда Polymer рекомендует его как замену утилиты polymer-cli, поддержка которой прекращена.
— jsunderhood (@jsunderhood) November 12, 2020
Новая версия es-dev-server получила название Web Dev Server. Он поддерживает некоторые плагины Rollup, а также предоставляет плагин на базе esbuild для компиляции TypeScript на лету.https://t.co/Mgnj5k5eSN
— jsunderhood (@jsunderhood) November 12, 2020
Есть и другие похожие инструменты. Пожалуй, самый известный — Snowpack, который разрабатывает Fred K. Schott. Между прочим, в прошлом он работал над бандлером и CLI в команде Polymer.https://t.co/LE1y8sAbcG
— jsunderhood (@jsunderhood) November 12, 2020
Идея Snowpack в двух словах — запустить Rollup один раз после npm install, скомпилировать все зависимости в папку web_modules и далее подключать их оттуда, используя относительные пути.
— jsunderhood (@jsunderhood) November 12, 2020
С выходом версии 2.0 Snowpack превратился в систему сборки с поддержкой TypeScript, JSX, React, Vue и Svelte и бандлером для продакшна. Подробнее можно почитать в анонсе релиза.https://t.co/63vOmbKONu
— jsunderhood (@jsunderhood) November 12, 2020
Кроме Snowpack, Fred K. Schott также запустил Skypack — поисковую систему и CDN для пакетов, поддерживающих ES-модули. Проекту уже больше года, до ребрендинга он носил название Pika.https://t.co/YVpCUL4Xf5
— jsunderhood (@jsunderhood) November 12, 2020
Опытом разработки на ES-модулях с использованием Snowpack поделился Bryan Braun. В статье описаны ряд аспектов: зависимости, CSS, кэширование. Отдельно упомянуты плюсы и минусы.https://t.co/LAr7SCjCKt
— jsunderhood (@jsunderhood) November 12, 2020
Теперь еще об одном проекте. В апреле идеей разработки на ES-модулях загорелся Эван Ю. Отсчет можно вести с этого твита. Ради этого проекта Эван даже отвлекся на время от работы над Vue 3.https://t.co/qPR0GoHPAh
— jsunderhood (@jsunderhood) November 12, 2020
Дальше, по-видимому, Эван увидел мой ретвит, где я упомянул es-dev-server. Вскоре в его проекте появились заимствованные оттуда идеи, вроде использования es-module-lexer и lru-cache.https://t.co/voSGvgoKGq
— jsunderhood (@jsunderhood) November 12, 2020
Сегодня Vite находится в стадии release candidate. Его документация содержит упоминания es-dev-server и Snowpack с обзором отличий в решаемых задачах и используемых подходах, прежде всего HMR.https://t.co/bs9TdrW5Oj
— jsunderhood (@jsunderhood) November 12, 2020
Кстати о HMR: авторы Vite и Snowpack при участии Jovi De Croock (Preact) работают над черновиком реализации соответствующего API для разработки на ES-модулях на основе import.meta.https://t.co/WqNboOaAGt
— jsunderhood (@jsunderhood) November 12, 2020
Замечу, что эта спецификация HMR имеет ряд отличий от реализации Hot Module Replacement в webpack. Их сравнение приводит Tobias Koppers (автор webpack) в своем комментарии к этому issue.https://t.co/Khk14YY3zh
— jsunderhood (@jsunderhood) November 12, 2020
Недавно экспериментальная поддержка HMR на основе этой спецификации появилась также и в Web Dev Server в качестве плагина. Советую взглянуть на примеры в документации.https://t.co/q6Y10Jlerw
— jsunderhood (@jsunderhood) November 12, 2020
До сих пор я говорил об инструментах. Но есть и еще один момент: многие пакеты в npm до сих пор не имеют ESM-версии. В качестве возможного решения Joel Denning создал проект esm-bundle.https://t.co/ou7DKZAZiM
— jsunderhood (@jsunderhood) November 12, 2020
В рамках esm-bundle для некоторых популярных пакетов настроена автоматическая публикация. Вот, например, версия Chai на ES-модулях, которую мы в Vaadin используем с Web Test Runner.https://t.co/vutJuLjkZR
— jsunderhood (@jsunderhood) November 12, 2020
Также стоит упомянуть утилиту Dual Publish от Андрея Ситника. Она помогает настроить публикацию ESM и CommonJS версий.https://t.co/LIoMs59UVw
— jsunderhood (@jsunderhood) November 12, 2020
Подводя итоги, скажу, что на сегодняшний день ES-модули можно использовать не только как compilation target, но и в процессе разработки. Думаю, этот подход будет развиваться и дальше.
— jsunderhood (@jsunderhood) November 12, 2020
В комментариях поделились ссылкой на дискорд о ES-модулях.https://t.co/S6VGhT5cmQ
— jsunderhood (@jsunderhood) November 13, 2020