Это пост №62 из серии, посвященный изучению JavaScript и его строительных компонентов. В процессе определения и описания основных элементов мы также поделимся некоторыми практическими правилами, которые мы используем при создании SessionStack, инструмента JavaScript для разработчиков, позволяющего идентифицировать, визуализировать и воспроизводить ошибки веб-приложений посредством воспроизведения сеанса с точностью до пикселя.

Введение

Esbuild — невероятно быстрый сборщик JavaScript, созданный с помощью Golang. Esbuild — это сборщик JavaScript следующего поколения, предназначенный для повышения производительности инструментов сборки и простоты использования. И некоторые из его основных особенностей:

Хотя esbuild не имеет такого мощного набора функций, как Webpack, он хорошо справляется со своей задачей — он прост в использовании и молниеносно быстр. На изображении ниже показано сравнение производительности esbuild и других ведущих сборщиков JavaScript:

Согласно официальному сайту esbuild, на приведенном выше изображении показано время, необходимое для создания производственного пакета из 10 копий библиотеки three.js с нуля с использованием настроек по умолчанию, включая минимизацию и исходные карты. Подробнее здесь.

На изображении выше видно, что esbuild выполнил эту задачу за 0,33 секунды, а Webpack 5 — за 41,53 секунды.

Хотя esbuild превосходит другие сборщики JavaScript, важно упомянуть об одном недостатке. И это потому, что производительность — это компромисс, поэтому, хотя esbuid работает молниеносно, он не так многофункционален, как Webpack.

Кроме того, esbuild не достиг версии 1.0, и, хотя популярность esbuild растет, он по-прежнему менее популярен, чем другие известные сборщики, такие как Webpack и Rollup, как видно из тенденции npm ниже:

Однако минимальный набор функций esbuild означает, что он не такой сложный, как Webpack. esbuild прост в освоении и использовании, и он невероятно быстр.

В дополнение к предостережениям выше, esbuild предоставляет API для JavaScript, CLI и Golang.

И в этой статье мы узнаем о esbuild и о том, как связать с ним приложения JavaScript.

Начнем со следующего раздела.

Начало работы

Прежде чем углубляться в код, мы изучим некоторые концепции esbuild, такие как типы содержимого esbuild и API сборки.

Типы контента

Esbuild обеспечивает встроенную поддержку различных типов контента с помощью загрузчиков. Эти загрузчики по функциональности аналогичны загрузчикам Webpack — они сообщают esbuild, как анализировать каждый тип контента. Некоторые из этих загрузчиков: загрузчик TypeScript, загрузчик JavaScript и загрузчик CSS настроены по умолчанию. А это означает, что esbuild обеспечивает готовую поддержку этих типов контента.

Ниже приведен список типов контента, поддерживаемых esbuild:

  • Javascript: загрузчик JavaScript включен по умолчанию для файлов .js, .cjs и .mjs.
  • TypeScript: загрузчик TypeScript включен по умолчанию для файлов .ts, .tsx, .mts и .cts. И это позволяет esbuild обеспечивать встроенную поддержку разбора синтаксиса TypeScript и отбрасывания аннотаций типов. Однако esbuild не выполняет проверку типов.
  • JSX: загрузчик JSX включен по умолчанию для файлов .jsx и .tsx. Однако по умолчанию синтаксис JSX не включен в файлах .js. Но мы можем настроить это с помощью API сборки, как показано ниже:
    https://gist.github.com/lawrenceagles/2d53816f6c58b6c34d6e17d0eb0a897e

Мы узнаем больше об API сборки esbuild в следующем разделе.

  • JSON: этот загрузчик анализирует файлы JSON в объекты JavaScript и экспортирует этот объект по умолчанию. Он также включен по умолчанию для .json файлов.
  • CSS: в esbuild CSS является первоклассным типом контента, и это означает, что esbuild может связывать файлы CSS напрямую, без необходимости импортировать ваш CSS из кода JavaScript. Как показано ниже:
    https://gist.github.com/lawrenceagles/2a394cf3da5780a2f558df37a24ca889

Таким образом, этот загрузчик включен по умолчанию для .css файлов и загружает эти файлы как синтаксис CSS.

  • Текст: эта выноска включена по умолчанию для .txt файлов. Загрузчик текста загружает файл в виде строки во время сборки и экспортирует строку как экспорт по умолчанию. И он предоставляет простой API, как показано ниже
    https://gist.github.com/lawrenceagles/bd9b8189dbb08e3d65476fb4e0410a8e
  • Двоичный: этот загрузчик загружает файл как двоичный буфер во время сборки и встраивает его в пакет, используя кодировку Base64. Однако этот загрузчик не включен по умолчанию.
  • Base64: этот загрузчик загружает файл как двоичный буфер во время сборки и встраивает его в пакет в виде строки с использованием кодировки Base64. Этот загрузчик также не включен по умолчанию.
  • URL-адрес данных: этот загрузчик загружает файл в виде двоичного буфера во время сборки и встраивает его в пакет в виде URL-адреса данных в кодировке Base64. Загрузчик данных URL полезен для объединения изображений, и его можно использовать в тандеме с загрузчиком CSS для загрузки изображений с помощью url().
  • Этот загрузчик не включен по умолчанию. И чтобы использовать его, нам нужно настроить его для соответствующего расширения файла, как показано ниже:
    https://gist.github.com/lawrenceagles/71dbee9cd7393515f8db283db005c75a
  • Внешний файл: этот загрузчик копирует файлы в выходной каталог и встраивает имя файла в пакет в виде строки. И эта строка экспортируется с использованием экспорта по умолчанию. Подобно загрузчику данных URL, этот загрузчик может использоваться для загрузки изображений и может работать вместе с загрузчиком CSS.
  • Чтобы использовать этот загрузчик, нам нужно вручную настроить его для соответствующего расширения, как показано ниже:
    https://gist.github.com/lawrenceagles/6c1121af845829b4f8875af454a244eb
    И это выглядит так:< br /> https://gist.github.com/lawrenceagles/b568cc5c02930a16d7bd39528782907a

API сборки

Хотя мы можем использовать esbuild через терминал с помощью CLI API, если передать много параметров в CLI, это может стать громоздким. Таким образом, для более сложных случаев использования esbuild также предоставляет API JavaScript, который является API сборки. И это позволяет нам настроить поведение esbuild. Это синоним файла webpack.config.js для Webpack.

API сборки для esbuild выглядит примерно так:
https://gist.github.com/lawrenceagles/8be4b1bd951e0b433daf804d3d825d2a

Функция сборки запускает исполняемый файл esbuild в дочернем процессе и возвращает обещание, которое разрешается после завершения сборки.

Хотя esbuild предоставляет альтернативный API сборки: buildSync — который работает синхронно, лучше всего использовать API асинхронной сборки, поскольку плагины esbuild работают только с асинхронным API.

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

Мы можем настроить целевую среду, как показано ниже:
https://gist.github.com/lawrenceagles/aeca2ca9bcf7869ab92dbd872b9f0c4a

Обратите внимание, что в приведенном выше примере используется API buildSync.

API сборки esbuild предоставляет множество простых и расширенных опций для настройки поведения esbuild.

И в приведенном выше коде мы использовали некоторые из этих параметров:

  • Точки входа: этот параметр представляет собой массив файлов. И каждый файл служит входом для алгоритма объединения. Они называются entry points, потому что сначала оцениваются, а затем загружают весь остальной код в приложение.
    Таким образом, вместо того, чтобы загружать множество библиотек на вашу страницу с тегами <script>, мы можем использовать операторы import, чтобы добавить их в запись нашего приложения. точка.
  • Outfile: этот параметр применим только в том случае, если есть только одна точка входа, как показано в нашем примере выше. Параметр outfile указывает имя конечного пакета — выходного файла, созданного в процессе сборки.
  • При наличии нескольких точек входа мы должны использовать параметр outdir для указания выходного каталога.
  • Outdir: этот параметр указывает выходной каталог для процесса сборки. И этот каталог будет создан только в том случае, если он еще не существует. Например, приведенный ниже код создаст выходной каталог с именем output для операции сборки:
    https://gist.github.com/lawrenceagles/fea875722e3b92874c71516bc78be45d
  • Bundle: esbuild по умолчанию не объединяет, поэтому, чтобы связать наш файл, нам нужно явно указать его, как показано выше, установив для его параметра значение true.
  • Минимизировать: если установлено значение true, этот параметр включает минимизацию нашего кода в процессе сборки. Минимизированный код меньше красиво напечатанного кода, и его легче загрузить. Но минимизированный код труднее отлаживать, поэтому обычно мы минимизируем код при сборке для производства.
  • Исходная карта: исходная карта — это файл, который обеспечивает способ сопоставления минимизированного и урезанного пакета JavaScript в его несвязанном состоянии. Во время создания ресурсов приложения — файлы CSS и JavaScript минимизируются и объединяются в один пакет, чтобы сделать их доставку с сервера более эффективной. Однако эти минимизированные и упрощенные пакеты трудно читать и отлаживать. Sourcemaps — это файл, который сопоставляет объединенный исходный код с исходным — несвязанным исходным кодом, что позволяет браузеру восстановить несвязанный исходный код и доставить его в отладчик. Установив для этой опции значение true, мы указываем esbuild генерировать исходные карты.
  • Цель: указывает целевую среду — например, браузер, для связанного кода JavaScript и/или CSS. Поэтому, если синтаксис JavaScript слишком нов для указанной среды, он сообщает esbuild преобразовать его в более старый синтаксис JavaScript, который может работать в этих средах.

Помимо этого, есть еще параметры, такие как watch, serve, и другие расширенные параметры, такие как tree shaking, JSX fragments, JSX factory и т. д.

В комплекте с esbuild

В этом разделе мы узнаем, как объединять приложения с помощью esbuild.

Чтобы использовать esbuild, сначала создайте проект nodejs, запустив:

npm init -y

Из каталога вашего проекта. Затем установите пакет esbuild, запустив:

npm install esbuild

Вы можете проверить версию, выполнив:

/node_modules/.bin/esbuild — version

И это печатает: 0.14.38

Мы собираем приложение React, поэтому установите следующие пакеты React:

npm install react react-dom

Теперь создайте файл app.jsx, содержащий следующий код:
https://gist.github.com/lawrenceagles/4829768fab37f3839874610d6504c97a

Теперь мы можем указать esbuild собрать наше приложение с помощью CLI API, запустив:

./node_modules/.bin/esbuild app.jsx — bundle — outfile=bundle.js

И мы получаем:

Итак, запустив приведенную выше команду, esbuild объединяет наше приложение в файл bundle.js. Кроме того, esbuild преобразует синтаксис JSX в JavaScript без каких-либо настроек, кроме расширения .jsx.

В нашем примере выше есть две вещи, на которые стоит обратить внимание:

  1. Процесс сборки esbuild не объединяет наше приложение по умолчанию, поэтому нам явно нужно передать флаг — bundle в команде. А если флаг
    — bundle отсутствует, esbuild будет запускать API преобразования вместо API сборки.
    API преобразования esbuild идеально подходит для таких сред, как браузер, в которых нет файла. system, потому что он выполняет операции с одной строкой без доступа к файловой системе. А в случае выше, выполнив:
    ./node_modules/.bin/esbuild app.jsx — outfile=bundle.js
    API преобразования вызывается, потому что флаг — bundle отсутствует, и наш код преобразуется в файл bundle.js со следующим кодом:
    https ://gist.github.com/lawrenceagles/ca983900b7189d075cd807654594fb2e
    Таким образом, мы можем видеть, что API преобразования преобразовал наш синтаксис JSX в чистый JavaScript.
  2. Второе, что следует отметить, это то, что по умолчанию esbuild не допускает синтаксис JSX в файлах .js, поэтому нам пришлось назвать наш файл app.jsx. Но если мы переименуем наш файл app.jsx в app.js и попытаемся собрать или преобразовать наше приложение, мы получим ошибку, как показано ниже:

И хотя это можно исправить, добавив флаг загрузчика: — loader:.js=jsx в команду CLI, мы также можем сделать это с помощью API сборки.

Поэтому переименуйте файл app.jsx в app.js и создайте файл buid.js, содержащий следующие коды:
https://gist.github.com/lawrenceagles/1c71b91cd981df752d430db3391b4be5

Затем обновите скрипт package.json, как показано ниже:
https://gist.github.com/lawrenceagles/7981b3be6b5b7dac04fbe9d11fc26490

Теперь мы можем создать наше приложение, запустив:
npm run build

Кроме того, установка для параметра bundle значения false указывает esbuild использовать API преобразования вместо API сборки.

Плагины

Плагины Esbuild позволяют разработчикам подключаться к процессу сборки и выполнять операции. И в отличие от API сборки и API преобразования, API плагина esbuild недоступен из интерфейса командной строки. Таким образом, вы можете использовать их только через API сборки.

И важно иметь в виду, что плагины esbuild не работают с buildSync API, как упоминалось выше.

Одним из недостатков использования плагина API является то, что он не является зрелым. И учет документации:
API плагина новый и все еще экспериментальный. Это может измениться в будущем до версии 1.0.0 esbuild, поскольку будут раскрыты новые варианты использования. Вы можете следить за «проблемой отслеживания для получения обновлений об этой функции».

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

Заключение

В этой статье мы многое узнали о esbuild — невероятно быстром сборщике JavaScript следующего поколения.

Esbuild имеет минимальную функциональность по сравнению с такими сборщиками, как Webpack. Тем не менее, он обменивает эти функции на оптимальную производительность. Так что это должно быть ключевым моментом, который следует учитывать перед внедрением esbuild.

Но это решается с помощью пакета типа Vite. Vite — это многофункциональная альтернатива Webpack. Vite использует esbuild под капотом — разумно. А если вы новичок в Vite, вы можете узнать все о Vite в нашей предыдущей статье из этой серии.

Молниеносно быстрые сборщики JavaScript следующего поколения, такие как esbuild, значительно упрощают для программного обеспечения создание эффективного и высокопроизводительного кода. esbuild еще не достиг версии 1.0, и его API все еще развивается. Но поскольку нам всем нравится применять новые технологии и обновлять наш код, поэтому, даже если мы чувствуем, что все протестировали перед выпуском, всегда необходимо убедиться, что наши пользователи хорошо работают с нашим продуктом.

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

Существует бесплатная пробная версия, если вы хотите попробовать SessionStack.

Если вы пропустили предыдущие главы серии, вы можете найти их здесь: