Автор: Мухаммад Хаббаб


Введение

Сборщики являются важным компонентом экосистемы JavaScript. Как следует из названия, сборщики генерируют один или несколько пакетов модулей. Сборщики модулей обрабатывают приложения JavaScript и строят графы зависимостей для сопоставления каждого модуля, необходимого вашему проекту. Вообще говоря, упаковщики выполняют следующие задачи:

  • Объединение CSS, HTML, изображений и других ресурсов
  • Объедините код JavaScript в требуемые форматы модулей
  • Оптимизация сборки, включая разделение кода, поднятие области действия, встряхивание дерева и т. д.
  • Горячая замена модуля в процессе разработки

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

Шаги, которые мы рассмотрим:


Зачем еще один сборщик JS

Технологии развиваются очень быстро. Каждый день вы будете видеть новые фреймворки, инструменты сборки и библиотеки для ускорения и улучшения ваших программных приложений. строить является еще одним примером постоянных инноваций и улучшений. Это сборщик JavaScript следующего поколения с открытым исходным кодом, который очень быстр и эффективен, чем другие сборщики в отрасли. Он написан на языке Go с учетом скорости; он основан на параллельном анализе, печати и генерации исходной карты. Он упаковывает и связывает код JS для распространения в Интернете. Некоторые из его особенностей включают в себя:

  • Это очень быстро, даже без кэша. Это намного быстрее, чем другие сборщики.
  • Надежный API для JavaScript и Go
  • ES6 и распространенные модули JS
  • Поддерживает синтаксис TypeScript и JSX.
  • Исходные карты
  • Минификация


Особенности esbuild

Давайте подробно рассмотрим некоторые его особенности.


Объединение и поддерживаемые типы контента

строить поддерживает как объединение, так и разделение кода. Объединение — это когда вы хотите развернуть один app.js цель. Разделение кода — это когда вы хотите разделить app.js во многие цели, такие как header.js или же sidebar.js и т.п.
строить имеет встроенную поддержку различных типов контента, используя свой компонент под названием «загрузчики». Загрузчик сообщает esbuild, как анализировать определенный тип контента. По умолчанию включены три общих загрузчика:

  • Загрузчик машинописного текста
  • загрузчик JavaScript
  • загрузчик CSS

Если мы посмотрим на типы контента, поддерживаемые esbuild, то они следующие:

  • Загрузчик JavaScript: как упоминалось выше, загрузчик JavaScript включен по умолчанию и поддерживает .js. .cjsа также .mjs файлы
  • Загрузчик Typescript: включен по умолчанию для .ts. .tsx. mtsа также .cts файлы. Однако он не поддерживает проверку типов.
  • JSX Loader: он включен по умолчанию для .jsx а также .tsx файлы. Обратите внимание, что JSX синтаксис не включен в .js файлы по умолчанию. Однако вы можете включить это, обновив конфигурацию.
  • Загрузчик JSON: он включен по умолчанию для .json файлы. Он анализирует файлы JSON в объекты JavaScript и экспортирует эти объекты.
  • Загрузчик CSS: он может связывать файлы CSS напрямую, не импортируя ваш CSS из кода JavaScript. Этот загрузчик также включен по умолчанию.
  • Загрузчик текста: он также включен по умолчанию для .txt файлы. Он загружает файлы в виде строки во время сборки и экспортирует экспорт строки по умолчанию.
  • Двоичный загрузчик: он загружает файл в виде двоичного буфера во время сборки и включает его в пакет как кодировку Base64. Он не включен по умолчанию.
  • URL-адрес данных: он загружает файл в виде двоичного буфера во время сборки и встраивает его в пакет в виде URL-адреса данных в кодировке Base64. Этот загрузчик полезен для объединения изображений вместе с загрузчиком CSS для загрузки изображений с помощью метода url(). Он не включен по умолчанию.


API сборки

esbuild имеет мощный API сборки JavaScript, с помощью которого вы можете настроить поведение esbuild. Это похоже на webpack.config.js файл в Webpack.

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

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

require('esbuild').build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: `bundle.js',
}).catch(() => process.exit(1))
Войти в полноэкранный режим

Выйти из полноэкранного режима


Инкрементная компиляция

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


Плагины

API плагинов — очень полезная функция строить. Это позволяет вам предварительно обрабатывать файлы, когда они связаны. Это может быть очень полезно, если вы конвертируете Sass в CSS или уценку в JSX и т. д. Вы все равно можете настроить детали реализации через API плагинов.


Режим сервера

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


Режим просмотра

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


Сравнение с другими сборщиками

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

Изображение ESBUILD



Бэкэнд-разработчики любят этот фреймворк React!

Познакомьтесь с безголовым решением на основе React для создания гладких CRUD Приложения. Благодаря уточнению вы можете быть уверены, что ваша кодовая база всегда будет оставаться чистой и свободной от шаблонов.

Пытаться уточнить чтобы быстро построить свой следующий CRUD проекта, будь то панель администратора, панель инструментов, внутренний инструмент или витрина.


улучшить логотип блога



Почему это так быстро

Вот как esbuild может достичь такой производительности:

  • Он разработан с использованием языка Go, который компилируется в собственный код. Другие сборщики в основном написаны на JavaScript, и NodeJS приходится тратить дополнительное время на анализ JavaScript в случае других сборщиков.
  • Он может выполнять печать, синтаксический анализ и генерацию исходной карты параллельно. Алгоритмы в esbuild разработаны таким образом, чтобы по возможности полностью задействовать все ядра процессора. Обратите внимание, что параллелизм лежит в основе языка Go, и Go может разумно использовать использование памяти по сравнению с JavaScript.
  • Все делается за несколько проходов вместо дорогостоящего преобразования данных.
  • У него не так много функций, как у Webpack, и его основное внимание уделяется скорости.


Пример использования esbuild

Во-первых, вам нужно создать проект NodeJS, выполнив эту команду

npm init –y
Войти в полноэкранный режим

Выйти из полноэкранного режима

Перейдите в каталог вашего проекта и установите пакет esbuild, выполнив следующую команду:

npm install esbuild
Войти в полноэкранный режим

Выйти из полноэкранного режима

Чтобы проверить правильность установки esbuild, выполните приведенную ниже команду, и она вернет версию esbuild:

/node_modules/.bin/esbuild — version
Войти в полноэкранный режим

Выйти из полноэкранного режима

В этом примере используется приложение React, поэтому вам нужно выполнить следующую команду для установки пакетов реакции:

npm install react react-dom
Войти в полноэкранный режим

Выйти из полноэкранного режима

Создать app.jsx файл со следующим кодом:

import * as React from 'react'
import * as Server from 'react-dom/server'

let Greet = () => <h1>Hello, esbuild Users</h1>

console.log(Server.renderToString(<Greet />))
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь давайте попросим esbuild связать это приложение, выполнив следующую команду:

./node_modules/.bin/esbuild app.jsx — bundle — outfile=bundle.js
Войти в полноэкранный режим

Выйти из полноэкранного режима

Здесь esbuild объединяет ваше приложение в bundle.jsи весь процесс очень быстрый.


Производство готово?

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


esbuild поддержка TypeScript

Для проектов на основе TypeScript в рабочей среде вы можете воспользоваться преимуществами использования сосать.

Используя tsup, вы можете создавать приложения TypeScript с минимальной конфигурацией.

Оно использует строить за кулисами, так что вы получаете мощь esbuild вместе с удобством tsup. Мы, в уточнении, видели замечательную производительность, используя tsup в наших проектах, работающих в производственной среде.


Вывод

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

Мы также рассмотрели некоторые основные команды для установки и сборки проектов с помощью esbuild. У esbuild большое будущее, и, хотя это новинка, он обладает огромным потенциалом для организаций, которые хотят создавать приложения все быстрее и быстрее.