Приклад використання esbuild

Привіт, мене звати Ярослав, я займаюсь розробкою в компанії Evrius і в робочий час, коли шукаю рішення в інтернеті, можу подивитись GitHub тренди по Go, тільки це між нами.

Інструмент esbuild

В GitHub трендах я і знайшов esbuild, який позиціонує себе як:

An extremely fast JavaScript bundler

esbuild дуже різко став набирати популярність через швидкісь збірки проєкту. Наскільки швидко набирає популярності, можете глянути на графіках 10 Best JavaScript Bundler Libraries, де esbuild займає третє місце, одразу після webpack та rollup.

Гриша Шехет навіть згадував про esbuild у Front-end дайджесті.

Передісторія

Якось мені знадобився простий інструмент, який буде переводити JSON в Protobuf. Наявні проекти були сирі, тому написав свій JSON to Proto (на основі інструменту, яким часто користуюсь — JSON to Go). Коли дізнався про esbuild, то заради цікавості вирішив спробувати.

Перенесення простого проєкту на esbuild

Проєкт JSON to Proto збирається через webpack. У файлі package.json є секція scripts:

{
  "scripts": {
    "build": "webpack --mode production"
  }
}

Для збірки я запускаю:

npm run build

щоб глянути скільки часу займає збірка використаємо інструмент time:

/usr/bin/time --format="webpack took %E" npm run build

webpack took 0:01.93

Як бачимо, збірка через webpack відбулась за ~ 1.93 секунди. Тепер підключимо esbuild і глянемо, скільки часу буде відбуватись нова збірка. Як підключити esbuild, взяв з документації:

npm install esbuild

{
  "scripts": {
    "build": "esbuild app.jsx --bundle --outfile=out.js"
  }
}

Адаптую для проєкту JSON to Proto:

{
  "scripts": {
    "build": "webpack --mode production",
    "esbuild": "esbuild ./src/app.ts --bundle --minify --outfile=./static/js/app.js"
  }
}

Тепер запущу збірку через esbuild і гляну час:

/usr/bin/time --format="esbuild took %E" npm run esbuild

esbuild took 0:00.16

Як бачимо, всього 0.16 секунди.

React, Angular, Vue, Svelte та esbuild

Можливо, вже помітили в попередніх прикладах, що esbuild підтримує TypeScript та React.

А для Angular, Vue та Svelte є issue на GitHub-і, навіть рішення та приклади підключення схожі на esbuild-svelte:

const svelte = require('svelte/compiler')
const path = require('path')
const util = require('util')
const fs = require('fs')

const convertMessage = ({ message, start, end, filename, frame }) => ({
    // ...
})

const sveltePlugin = options => {
    return {
        name: 'esbuild-svelte',
        setup(build) {
            //main loader
            build.onLoad({ filter: /\.svelte$/ }, async (args) => {
                // ...
            })

            //if the css exists in our map, then output it with the css loader
            build.onLoad({ filter: /\.esbuild-svelte-fake-css$/ }, (args) => {
                // ...
            })
        },
    }
}

module.exports = sveltePlugin;