Инструменты сборки нового поколения

Фронтенд-разработчик Хью Хауорт сравнил в блоге на css-tricks.com инструменты сборки нового поколения. Автор постарался в общих чертах описать зачем они нужны и варианты их использования.

Чем они отличаются от существующих инструментов?

Хью Хауорт объясняет это тем, что, независимо от того, используется ли, например, webpack, Rollup или Parcel для сервера разработки, инструмент объединяет всю кодовую базу из исходного кода и папки node_modules, запускается через процессы сборки, такие как Babel, TypeScript или PostCSS, а затем отправляет связанный код в браузер. Это может замедлить работу серверов разработки. Новые инструменты не следуют этой модели и призваны ускорить разработку.

Прежде чем начать сравнение, автор предлагает выделить уже существующие функции каждого инструменты. Среди них:

•       Поддержка нативных модулей JavaScript;
•       Компиляция TypeScript;
•       JSX;
•       Наличие плагина API для расширяемости;
•       Встроенный сервер разработки;
•       Поддержка библиотек CSS-in-JS.

 

А теперь о каждом инструменте поподробнее. 

esbuild

По мнению автора подборки, главная особенность инструмента заключается в том, что он обеспечивает скорость сборки в 10-100 раз быстрее, чем сборщики на основе Node. Инструмент предоставляет интуитивно понятные API-интерфейсы JavaScript и командную строку с интеллектуальными настройками по умолчанию.

Когда esbuild появится в версии 1.0, инструмент может быть полезен на больших производственных площадках и позволит сократить время запуска и сборки.

Чтобы начать проект в esbuild, необходимо установить его через npm, затем создать файлы src/app.jsk и dist/index.html, после чего использовать команду для компиляции приложения в файл dist/bundle.js.

./node_modules/.bin/esbuild src/app.jsx --bundle --platform=browser --outfile=dist/bundle.js

Хью Хауорт предупреждает, что при открытии index.html может возникнуть «белый экран смерти» и консольная ошибка Uncaught ReferenceError: process is not defined. Способ устранения проблемы описан здесь.

В esbuild есть параметр --serve для сервера разработки. Он обходит файловую систему и обслуживает модули прямо из памяти, гарантируя, что браузер не будет загружать старые версии модулей. По мнению автора подборки, единственный минус в том, что параметр не включает в себя прямую/горячую перезагрузку.

Предварительно настроенная версия esbuild с живой загрузкой и некоторыми настройками React доступна по ссылке.

Инструмент может импортировать CSS в JavaScript с помощью @import. Esbuild скомпилирует CSS в файл с тем же именем, что и основной файл JavaScript.

Сообщество, которое создает плагины для инструмента, постоянно растет. Например, есть плагины для оформления однофайловых компонентов Vue и компонентов Svetle.

Esbuild работает с файлами JSON и способен объединять их в модули JavaScript без какой-либо конфигурации.

Инструмент может импортировать изображение в JavaScript с возможностью либо преобразовать их в URL-адреса данных, либо скопировать их в папку вывода. Чтобы включить любую из опций, нужно прописать следующие команды:

loader: { '.png': 'dataurl' } // Converts to data url in JS bundle
loader: { '.png': 'file' } // Copies to output folder

Snowpack

Инструмент для сборки от создателей Skypack и  Pika. Представляет собой сервер для разработки и был создан с философией «unbundled-разработки». По умолчанию на этапе сборки Snowpack файлы не объединяются в один пакет, вместо этого он разделяет их на разные бандлы, которые запускаются в браузере. Автор подборки отмечает, что у инструмента есть документация, в том числе список руководств по его использованию с фреймворками JavaScript и множество шаблонов для них.

Инструмент позволяет:

• Удвоить объем несвязанного развертывания;
• Писать исходный код с небольшим количеством модулей;
• Постепенно внедрять интерфейсную структуру в серверное или статистическое приложение;
• Опробовать esbuild, так как является его оболочкой.

Чтобы начать работу со Snowpack, необходимо перейти в командную строку и выполнить следующие команды:

mkdir snowpackproject
cd snowpackproject
npm init #fill with defaults 
npm install snowpack

Затем добавить в package.json это:

// package.json
"scripts": {
  "start": "snowpack dev",
  "build": "snowpack build"
},

После этого создаем файл конфигурации:

// Mac or Linux
touch snowpack.config.js
// Windows
new-item snowpack.config.js

Вставьте приведенный ниже код в файл конфигурации:

// snowpack.config.js
module.exports = {
  packageOptions: {
    "source": "remote",
  }
};

Здесь source: remote включает потоковый импорт, который позволяет Snowpack обойти установку npm путем преобразования простого импорта в импорт CDN (Content Delivery Network).

Далее создаем файл index.html:

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">>
  <title>Snowpack streaming imports</title>
</head>
<body>
  <div id="root"></div>
  <!-- Note the type="module". This is important for JavaScript module imports. -->
  <script type="module" src="app.js"></script>
</body>
</html>

И добавляем файл app.jsx:

// app.jsx
import React from 'react'
import ReactDOM from 'react-dom'
const App = ()=>{
  return <h1>Welcome to Snowpack streaming imports!</h1>
}
ReactDOM.render(<App />,document.getElementById('root')); 0

Snowpack поддерживает JSX, а также определяет, используется React или Preact, после чего решает, какую функцию рендеринга использовать для преобразования JSX. CSS можно импортировать в JavaScript и добавлять в заголовок документа во время выполнения кода. Модули CSS также изначально поддерживают для определения области видимости.

Команда snowpack built по умолчанию в основном копирует точную структуру исходного файла в папку вывода. Для файлов, которые компилируются в JavaScript (например, TypeScript, JSX, JSON, .vue, .svetle), он преобразует каждый отдельный файл в отдельный удобный для браузера модуль JavaScript.

Vite

Хью Хауорт поясняет, если esbuild концентрируется на этапе сборки, а Snowpack — на сервере разработки, Vite предоставляет как полный сервер разработки, так и оптимизированную команду сборки с использованием Rollup.

Быстрый сервер разработки и оптимизированная производственная сборка с нулевой конфигурацией означают возможность перехода с нуля к производственной среде без какой-либо настройки. Инструмент можно использовать как в небольшом побочном проекте, так и в большом производственном приложении.

Vite предварительно объединяет все зависимости проекта в единый собственный модуль JavaScript с esbuild, а затем обслуживает его с помощью сильно кэшированного HTTP-заголовка. Это помогает не тратить время на компиляцию, обслуживание или запрос импортированных зависимостей после загрузки первой страницы. Инструмент также предоставляет четкие сообщения об ошибках, отображая точный блок кода и номера строк для устранения неполадок.

Автор подборки выделяет следующие плагины Vite:

• Для горячей перезагрузки модулей;
• Для однофайловых компонентов;
• JSX;
• react-refresh.

При работе с CSS Vite поддерживает объединения импорта и модулей CSS. Также можно установить плагины PostCSS и создать файл postcss.config.js с помощью менеджера пакетов npm, и Vite автоматически начнет применять эти преобразования к CSS. 

По умолчанию изображения импортируются в общедоступный URL, но есть возможность загружать их в виде строк, используя параметр ?raw в конце строки URL. Файлы JSON можно импортировать в источник и преобразовать в модуль, экспортирующий один объект.

Vite использует Rollup для предварительно настроенной производственной сборки с множеством оптимизаций. Инструмент намеренно предоставляет сборку с нулевой конфигурацией, которой должно хватить для большинства случаев использования. 

wmr

Как и Vite предоставляет как сервер разработки с возможностью горячей замены модулей, так и оптимизированную производственную сборку. 

Автор подборки советует использовать wmr, например, когда нужно быстро создать прототип с помощью Preact. В инструменте нет конфигурации. Работа с ним, по мнению Хауорта, похожа на использование статистического файлового сервера. 

Чтобы использовать React с wmr вместо Preact, нужно сделать два шага. Сначала использовать псевдоним htm/preact для htm/react и отреагировать на es-react в package.json: 

"alias": {
  "htm/preact": "htm/react",
  "react": "es-react"
},

Затем нужно добавить импорт из es-react в свои компоненты: 

// ReactDOM only needed on root render
import { React, ReactDOM,} from 'es-react';

Таким образом используется не обычный пакет React, а React из es-react. Это связано с тем, что wmr полагается на пакеты, совместимые с собственными модулями JavaScript. Это иллюстрирует философию инструмент, заключающуюся в использовании собственных примитивов веб-платформы в противоположность использованию инструментов для обхода и абстрагирования.

Автор подборки отмечает следующие плагины для wmr:

• Плагин, который предоставляет API подключаемого модуля. Он поддерживает подключаемые модули Rollup для этапа сборки.
• Плагин, который минимизирует HTML.
• Плагин, который поддерживает маршрутизацию на основе файловой системы.

wmr поддерживает разные фреймворки, но для них нет готовых шаблонов. разработчик Хью Хауорт отмечает, что ему сначала было сложно настроить преобразование JSX.

Инструмент может импортировать файлы CSS в JavaScript и поддерживает модули CSS.

Из минусов автор подборки отмечает отсутствие встроенной поддержки ни для однофайловых компонентов Vue, ни для компонентов Svetle. Однако этап сборки wmr работает с подключаемыми модулями Rollup, а сервер разработки может быть настроен с помощью промежуточного программного обеспечения Polka/Express, поэтому их можно использовать для преобразования импорта в компоненты Vue и Svetle.

Также инструмент не позволяет импортировать изображение в JavaScript как URL-адреса данных без подключаемого модуля. Вместо этого нужно импортировать их, используя синтаксически правильный метод JavaScript.

Например, если в общей папке есть файл dog.jpg, его можно включить в компонент Preact следующим образом:

function Dog() {
  return <img src={new URL('./dog.jpg', import.meta.url)} alt="dog hanging out"></img>
}

Как только запускается этап сборки, образ копируется и будет доступен из папки дистрибутива.