#такое дня
Итак, крик души. Кипим до сих пор. Не я первый, не я последний.
Задача простая и сравнительно типичная: вендоризовать библиотеку. Т. е. не просто импортировать в проект, а:
1. импортировать нужное
2. написать адаптер для использования
3. собрать
4. тришейкнуть
5. транспилировать в es3 (поясню ниже)
6. сделать функцию-адаптер доступной в глобальном скоупе
Оказалось, в 2022 году это не так-то просто!
Сразу скажу, что речь о пакете semver, нам нужно было сравнение версий.
Начнём хотя бы с того, что он в commonjs, что уже ну такое. В общем, поехали.
Берём rollup, берём swc. Почему swc? Потому что быстрее чем babel и tsc. Почему не esbuild? Потому что swc умеет собирать в es3 (Google AppsScript в рабочей конфигурации — это es3). Теперь надо соединить rollup и swc.
Добро пожаловать в ад!
Ищем плагины, находим следующий: rollup-plugin-swc3. Почему его? Ну, альтернативы не работают с современным rollup 🙂
Но у него есть минус! Он не поддерживает глобальный конфиг swc, нужно писать внутри определения. Следующий минус — в конфигурации по-умолчанию не транспилирует node_modules, ну ок, передали пустой массив в exclude.
И тут мы понимаем, что semver — в commonjs, а не esm. swc в commonjs не умеет, давайте ещё плагин, находим официальный commonjs. Работает из коробки, ура. Поехали дальше.
Очевидное решение для модулей в старом JavaScript — это IIFE (самовызывающаяся функция). Ну ок, включаем в rollup режим iife.
Ага, сказала шведская бензопила.
Собрать-то собрали, но функция-адаптер так и осталась внутри! Почему? Потому что rollup — он для сборки библиотек. Хотите глобальный скоуп — лезьте в него ручками намеренно.
Что же делать? Решение есть, плагин rollup-plugin-iife. Он возьмёт наш es-модуль (да, режим сборки в rollup придётся поменять), вернёт функцию-адаптер из iife и присвоит её значение переменной, а скоуп уже ваша забота.
Так, сделали, собрали — не работает. Почему? Ну, например, в es3-реализации от Google AppsScript (на самом деле, от Mozilla, потому что движок Rhino) в объекте не может содержаться ключ default, зато может — 'default'. Да-да, строкой — можно, а иначе default — зарезервирован. Не очень стандартный JS, ага.
Беда, что делать?
Находим официальный плагин replace, проходимся по коду и заменяем нужное. Там ещё и геттеры-сеттеры пришлось заменить, потому что swc их транспилировать не умеет... ну не суть.
Естественно, ещё нужен nodeResolve для импорта пакетов из node_modules...
Собрали, работает. Теперь охота переименовать файлы. И тут начинается веселье.
Плагин iife не умеет работать с файлами, ему на вход только директорию подавай. Ну ок, потыркались, решили не делать переименование файла, сразу назвали как надо (вполне себе решение, чо вы).
Захотелось минимизировать, вроде swc умеет. Включаем. Отваливается iife. Опять. Выключаем. Не очень-то и хотелось.
Захотели на вход несколько файлов — rollup не умеет, только объединять конфигурации в массив. Ну ок, вынесли общие конфиги в переменные, сделали массив.
Уфф, закончили. Работает. Врагу не пожелаю.
Да ладно бы только с rollup такая проблема! Шаг влево-вправо от того, как видят типичные задачи разработчики бандлеров — и вот вы уже страдаете. Чуток нестандартная платформа — страдаете. Разделение бандла на части по определённой схеме — страдаете. Полифиллы — страдаете. Начитались дифирамб турбопаку — а они даже в SCSS не научились (и в плагины тоже). Опять страдаете.
С другой стороны, вроде и платят. Но могли бы ещё и молоко выдавать.
За вредность.
P. S. зато тришейк заработал из коробки. Ня.
#rollup #swc #bundle
Итак, крик души. Кипим до сих пор. Не я первый, не я последний.
Задача простая и сравнительно типичная: вендоризовать библиотеку. Т. е. не просто импортировать в проект, а:
1. импортировать нужное
2. написать адаптер для использования
3. собрать
4. тришейкнуть
5. транспилировать в es3 (поясню ниже)
6. сделать функцию-адаптер доступной в глобальном скоупе
Оказалось, в 2022 году это не так-то просто!
Сразу скажу, что речь о пакете semver, нам нужно было сравнение версий.
Начнём хотя бы с того, что он в commonjs, что уже ну такое. В общем, поехали.
Берём rollup, берём swc. Почему swc? Потому что быстрее чем babel и tsc. Почему не esbuild? Потому что swc умеет собирать в es3 (Google AppsScript в рабочей конфигурации — это es3). Теперь надо соединить rollup и swc.
Добро пожаловать в ад!
Ищем плагины, находим следующий: rollup-plugin-swc3. Почему его? Ну, альтернативы не работают с современным rollup 🙂
Но у него есть минус! Он не поддерживает глобальный конфиг swc, нужно писать внутри определения. Следующий минус — в конфигурации по-умолчанию не транспилирует node_modules, ну ок, передали пустой массив в exclude.
И тут мы понимаем, что semver — в commonjs, а не esm. swc в commonjs не умеет, давайте ещё плагин, находим официальный commonjs. Работает из коробки, ура. Поехали дальше.
Очевидное решение для модулей в старом JavaScript — это IIFE (самовызывающаяся функция). Ну ок, включаем в rollup режим iife.
Ага, сказала шведская бензопила.
Собрать-то собрали, но функция-адаптер так и осталась внутри! Почему? Потому что rollup — он для сборки библиотек. Хотите глобальный скоуп — лезьте в него ручками намеренно.
Что же делать? Решение есть, плагин rollup-plugin-iife. Он возьмёт наш es-модуль (да, режим сборки в rollup придётся поменять), вернёт функцию-адаптер из iife и присвоит её значение переменной, а скоуп уже ваша забота.
Так, сделали, собрали — не работает. Почему? Ну, например, в es3-реализации от Google AppsScript (на самом деле, от Mozilla, потому что движок Rhino) в объекте не может содержаться ключ default, зато может — 'default'. Да-да, строкой — можно, а иначе default — зарезервирован. Не очень стандартный JS, ага.
Беда, что делать?
Находим официальный плагин replace, проходимся по коду и заменяем нужное. Там ещё и геттеры-сеттеры пришлось заменить, потому что swc их транспилировать не умеет... ну не суть.
Естественно, ещё нужен nodeResolve для импорта пакетов из node_modules...
Собрали, работает. Теперь охота переименовать файлы. И тут начинается веселье.
Плагин iife не умеет работать с файлами, ему на вход только директорию подавай. Ну ок, потыркались, решили не делать переименование файла, сразу назвали как надо (вполне себе решение, чо вы).
Захотелось минимизировать, вроде swc умеет. Включаем. Отваливается iife. Опять. Выключаем. Не очень-то и хотелось.
Захотели на вход несколько файлов — rollup не умеет, только объединять конфигурации в массив. Ну ок, вынесли общие конфиги в переменные, сделали массив.
Уфф, закончили. Работает. Врагу не пожелаю.
Да ладно бы только с rollup такая проблема! Шаг влево-вправо от того, как видят типичные задачи разработчики бандлеров — и вот вы уже страдаете. Чуток нестандартная платформа — страдаете. Разделение бандла на части по определённой схеме — страдаете. Полифиллы — страдаете. Начитались дифирамб турбопаку — а они даже в SCSS не научились (и в плагины тоже). Опять страдаете.
С другой стороны, вроде и платят. Но могли бы ещё и молоко выдавать.
За вредность.
P. S. зато тришейк заработал из коробки. Ня.
#rollup #swc #bundle
🤯14❤4👍4😁2🔥1🍌1
#ссылка дня
Сначала Bun сделал вызов Node.js и Deno, впихнув невпихуемое и сделав рантайм быстрым. Теперь он выходит на территорию фронтенд-сборщиков, где позиции Node.js и сопутствующих сборщиков казались весьма стабильными.
С Bun 1.3 можно сёрвить HTML-файлы напрямую, а JavaScript, TypeScript, JSX и CSS обрабатываются автоматически. Горячая перезагрузка позволяет видеть изменения мгновенно, а для проектов на React достаточно
Внутри появились новые возможности: поддержка MySQL наряду с PostgreSQL и SQLite, встроенный Redis-клиент, улучшенная маршрутизация, WebSocket, работа с cookies и новые механизмы изолированных установок пакетов. Всё это делает Bun 1.3 полноценной средой, где фронтенд, бэкенд и сборка объединены в одном инструменте.
Теперь Bun действительно бандлит, простите
https://bun.com/blog/bun-v1.3
#bun #node #bundle #webpack
Сначала Bun сделал вызов Node.js и Deno, впихнув невпихуемое и сделав рантайм быстрым. Теперь он выходит на территорию фронтенд-сборщиков, где позиции Node.js и сопутствующих сборщиков казались весьма стабильными.
С Bun 1.3 можно сёрвить HTML-файлы напрямую, а JavaScript, TypeScript, JSX и CSS обрабатываются автоматически. Горячая перезагрузка позволяет видеть изменения мгновенно, а для проектов на React достаточно
bun init --react, чтобы получить готовую среду. Сборка для продакшн стала проще: bun build --production оптимизирует проект без лишних конфигов.Внутри появились новые возможности: поддержка MySQL наряду с PostgreSQL и SQLite, встроенный Redis-клиент, улучшенная маршрутизация, WebSocket, работа с cookies и новые механизмы изолированных установок пакетов. Всё это делает Bun 1.3 полноценной средой, где фронтенд, бэкенд и сборка объединены в одном инструменте.
Теперь Bun действительно бандлит, простите
https://bun.com/blog/bun-v1.3
#bun #node #bundle #webpack
1❤19👎4👍3