esbuild の機能が足りないならプラグインを自作すればいいじゃない

2021/01/07
このエントリーをはてなブックマークに追加

Rollup から esbuild に乗り換えた null です。

Webpack や Rollup の遅さにイライラしている方はたくさんいらっしゃると思います。かといってモジュールバンドラーの乗り換えなんてそう簡単にできるものでもありません。まして esbuild には機能 x がないじゃないですか、上記記事によればプラグインシステムもないし…

時代は変わりました。上記記事はすっかり古くなってしまいました。当時（v0.5.3）未実装だったいくつかの重要な機能が現在（v0.8.29）では利用可能になっています。

特筆すべきは CSS ローダーとプラグイン機構が組み込まれたことでしょう。多くのユースケースを［自力で］カバーできるようになりました。

※ プラグイン API はまだ実験的機能です。 v1.0.0 までに仕様が変わるかもしれません。

CSS ローダー

esbuild は CSS をエントリポイントにできるようになりました。スクリプトから CSS をインポートすることもできます。スクリプトからインポートした CSS は結合されて出力先ディレクトリに出力されます（たとえば dist/app.js が生成される設定であれば、合わせて dist/app.css が生成されます）。

CSS に含まれる @import も解決されて結合されますし、 url() で指定された画像やフォントは出力ディレクトリへコピーすることも Data URL 形式で埋め込むこともできます。

プラグイン API

「公式読め」に尽きます。

が、記事の前提になるので軽く紹介します。次の例は上記公式ページの最初に出てくるプラグイン実装です。

let envPlugin = {
  name: 'env',
  setup(build) {
    // Intercept import paths called "env" so esbuild doesn't attempt
    // to map them to a file system location. Tag them with the "env-ns"
    // namespace to reserve them for this plugin.
    build.onResolve({ filter: /^env$/ }, args => ({
      path: args.path,
      namespace: 'env-ns',
    }))

    // Load paths tagged with the "env-ns" namespace and behave as if
    // they point to a JSON file containing the environment variables.
    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env),
      loader: 'json',
    }))
  },
}

プラグインは name という文字列プロパティと setup メソッドを持つオブジェクトである必要があります。

setup() に渡される第一引数 build が持つ 2 つの関数 onResolve() と onLoad() にコールバックを渡すことでコンパイルに介入します。

onResolve() にはモジュールのパスと名前空間を解決するためのコールバックを渡します。

onLoad() にはモジュールのパスと名前空間から実際のコンテンツを解決するためのコールバックを渡します。

この「名前空間」がちょっと分かりにくいと感じるのですが、私は onResolve() と onLoad() を結び付けるための識別子だと解釈しています。 onResolve() で「このプラグインで解決するモジュールだよ」という印を名前空間という形で付けておき、 onLoad() で印付きモジュールを実コンテンツに変換します。上記例の envPlugin でもそのように使われているのが読み取れるかと思います。（onResolve() で実コンテンツを返せるようになっていれば不要な概念だったんじゃないかと思わなくもないような…）

onResolve() で名前空間を指定しなかったり "file" を指定した場合はファイルシステムからコンテンツが読み込まれます。

ちなみに esbuild パッケージには TypeScript の型定義が含まれており、プラグイン開発においても型の恩恵を受けられます。また、 JavaScript だけでなく Go 言語でもプラグインを実装できるようです。

プラグインでできないこと

esbuild のプラグインでできるのは個々のモジュールの解決だけです。 esbuild 内部の AST の操作、複数モジュールにまたがる処理、バンドル後のコンテンツへの介入などはできないようです。たとえばインポートしている CSS がすべて解決されて結合された後で cssnano や clean-css のような最適化をかけたい場合、現状のプラグインシステムでは実現できないと思います（私の勘違いだったらごめんなさい）。

バンドル後のコンテンツを操作したい場合は、プラグインという形ではなく、 esbuild によるビルド実行後に別途処理すれば良いと思います。私はあるプロダクトのビルドスクリプトにおいて、 esbuild によるビルド後に PurgeCSS で tailwindcss のパージを実行するようにしています。

星雲に包まれる工場夜景

星雲に包まれる工場夜景

Sass プラグインを作ってみる

先述の通り esbuild は CSS をサポートしていますが、 CSS メタ言語のトランスパイルは未サポートです。

ということで Sass（SASS / SCSS）のトランスパイルをするプラグインを書いてみました。

const sass = require('sass')

const sassPlugin = options => ({
  name: 'esbuild-plugin-sass',
  setup(build) {
    build.onLoad({ filter: /\.s[ac]ss$/ }, ({ path }) => {
      return new Promise(resolve => {
        sass.render({ ...options, file: path }, (err, result) => {
          resolve({
            contents: result?.css,
            loader: 'css',
            errors: err ? [{ text: err.message }] : undefined,
          })
        })
      })
    })
  },
})

onLoad() コールバックで sass.render() を呼んで Promise として返しているだけです。若干コールバック地獄感はありますが（苦笑）、自分では複雑なことは何もしていません。

Sass に限らず altJS や CSS メタ言語のトランスパイルプラグインはとてもシンプルに実装できそうなことが分かりますね。トランスパイラーの API がシンプルであれば、ですが。

プラグインができたら esbuild.build() の plugins オプションに渡します。

const esbuild = require('esbuild')

esbuild.build({
  entryPoints: ['src/app.ts'],
  outdir: 'dist',
  bundle: true,
  minify: true,
  treeShaking: 'ignore-annotations',
  plugins: [sassPlugin()],
}).catch(() => process.exit(1))
// src/app.ts
import './a.scss'
import './b.scss'
// ...

ビルドスクリプトを実行すると、 src/a.scss と src/b.scss がそれぞれトランスパイルされた上で結合され、 dist/app.css に出力されます。

Linaria プラグインを作ってみる

Zero-runtime CSS in JS ライブラリ Linaria はスクリプトを（Babel で）トランスパイルしつつ CSS を吐きます。

その CSS も esbuild にバンドルしてもらえばいいんだよなー、と思って実装してみました。 あくまで試しに実装してみただけで npm には公開していません。もし興味あればコピペでも clone でも fork でも何でもしてください。
https://github.com/luncheon/esbuild-plugin-linaria

既存のプラグイン

非公式プラグインの公式まとめがあります。

まだまだ充実しているとは言い難いです。チャンス（！？）

Svelte や Solid のコンポーネントを読み込んでコンパイルするプラグインも公開されています。

GLSL をミニファイして読み込むプラグインなんかもあります。

まとめ

esbuild のプラグイン機構を紹介しました。

esbuild 本体ではサポートされていない形式のファイルも、プラグインさえあれば［作れば］インポートできるようになります。必要なら JavaScript や TypeScript のトランスパイルを Babel や Sucrase、 swc に移譲することもできます。 Webpack や Rollup、 Parcel から乗り換えるハードルは下がったのではないでしょうか。

プラグインはまだ実験的機能という位置付けであり、今後 API 仕様が変わる可能性があります。が、 API 仕様が変わったとしても実現できることが減る可能性は少ないんじゃないかと私は思います（個人の想像です）。

もちろん、プラグインの処理が遅ければビルドに時間がかかってしまいます。それでも、少なくともバンドルとミニファイは爆速です。プラグインを使うとしても、他のバンドラーから esbuild に乗り換えることでビルド時間を削減できる可能性は大いにあると思います。

パイプライン処理について （2021/02/04 追記）

現状の esbuild プラグインの仕組みでは、複数のプラグインをつなぎ込むパイプライン処理ができません。たとえば Sass 変換後に PostCSS 変換したい場合、「Sass プラグイン」と「PostCSS プラグイン」を使えば良さげに思えますが、実際には単一のプラグインで Sass 変換後に PostCSS 変換しなければなりません。

この問題に対し、プラグインによる変換をパイプライン処理するためのプラグインが第三者によって公開されています。

もしいまプラグインを作るなら esbuild-plugin-pipe でも使えるようにしておくと便利かもしれません。

esbuild 本体に対してもそれっぽい提案があります。本体で対応してくれたらいいなぁ。

その他の記事

Other Articles

2022/06/03
拡張子に Web アプリを関連付ける File Handling API の使い方

2022/03/22
<selectmenu> タグできる子; <select> に代わるカスタマイズ可能なドロップダウンリスト

2022/03/02
Java 15 のテキストブロックを横目に C# 11 の生文字列リテラルを眺めて ECMAScript String dedent プロポーザルを想う

2021/10/13
Angularによる開発をできるだけ型安全にするためのKabukuでの取り組み

2021/09/30
さようなら、Node.js

2021/09/30
Union 型を含むオブジェクト型を代入するときに遭遇しうるTypeScript型チェックの制限について

2021/09/16
[ECMAScript] Pipe operator 論争まとめ – F# か Hack か両方か

2021/07/05
TypeScript v4.3 の機能を使って immutable ライブラリの型付けを頑張る

2021/06/25
Denoでwasmを動かすだけの話

2021/05/18
DOMMatrix: 2D / 3D 変形（アフィン変換）の行列を扱う DOM API

2021/03/29
GoのWASMがライブラリではなくアプリケーションであること

2021/03/26
Pythonプロジェクトの共通のひな形を作る

2021/03/25
インラインスタイルと Tailwind CSS と Tailwind CSS 入力補助ライブラリと Tailwind CSS in JS

2021/03/23
Serverless NEGを使ってApp Engineにカスタムドメインをワイルドカードマッピング

2020/08/26
TypeScriptで関数の部分型を理解しよう

2020/06/16
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない

2020/03/19
[Web フロントエンド] Elm に心折れ Mint に癒しを求める

2020/02/28
さようなら、TypeScript enum

2020/02/14
受付のLooking Glassに加えたひと工夫

2020/01/28
カブクエンジニア開発合宿に行ってきました 2020冬

2020/01/30
Renovateで依存ライブラリをリノベーションしよう 〜 Bitbucket編 〜

2019/12/27
Cloud Tasks でも deferred ライブラリが使いたい

2019/12/25
*, ::before, ::after { flex: none; }

2019/12/21
Top-level awaitとDual Package Hazard

2019/12/20
Three.jsからWebGLまで行きて帰りし物語

2019/12/18
Three.jsに入門＋手を検出してAR.jsと組み合わせてみた

2019/12/04
WebXR AR Paint その２

2019/11/06
GraphQLの入門書を翻訳しました

2019/09/20
Kabuku Connect 即時見積機能のバックエンド開発

2019/08/14
Maker Faire Tokyo 2019でARゲームを出展しました

2019/07/25
夏休みだョ！WebAssembly Proposal全員集合！！

2019/07/08
鵜呑みにしないで！ —— 書籍『クリーンアーキテクチャ』所感 ≪null 篇≫

2019/07/03
W3C Workshop on Web Games参加レポート

2019/06/28
TypeScriptでObject.assign()に正しい型をつける

2019/06/25
カブクエンジニア開発合宿に行ってきました 2019夏

2019/06/21
Hola! KubeCon Europe 2019の参加レポート

2019/06/19
Clean Resume きれいな環境できれいな履歴書を作成する

2019/05/20
[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる

2019/04/16
C++のenable_shared_from_thisを使う

2019/04/12
OpenAPI 3 ファーストな Web アプリケーション開発（Python で API 編）

2019/04/08
WebGLでレイマーチングを使ったCSGを実現する

2019/03/29
その1 Jetson TX2でk3s(枯山水)を動かしてみた

2019/04/02
『エンジニア採用最前線』に感化されて2週間でエンジニア主導の求人票更新フローを構築した話

2019/03/27
任意のブラウザ上でJestで書いたテストを実行する

2019/02/08
TypeScript で “radian” と “degree” を間違えないようにする

2019/02/05
Python3でGoogle Cloud ML Engineをローカルで動作する方法

2019/01/18
SIGGRAPH Asia 2018 参加レポート

2019/01/08
お正月だョ！ECMAScript Proposal全員集合！！

2019/01/08
カブクエンジニア開発合宿に行ってきました 2018秋

2018/12/25
OpenAPI 3 ファーストな Web アプリケーション開発（環境編）

2018/12/23
いまMLKitカスタムモデル（TF Lite）は使えるのか

2018/12/21
[IoT] Docker on JetsonでMQTTを使ってCloud IoT Coreと通信する

2018/12/11
TypeScriptで実現する型安全な多言語対応（Angularを例に）

2018/12/05
GASでCompute Engineの時間に応じた自動停止/起動ツールを作成する 〜GASで簡単に好きなGoogle APIを叩く方法〜

2018/12/02
single quotes な Black を vendoring して packaging

2018/11/14
3次元データに2次元データの深層学習の技術(Inception V3, ResNet)を適用

2018/11/04
Node Knockout 2018 に参戦しました

2018/10/24
SIGGRAPH 2018参加レポート-後編（VR/AR）

2018/10/11
Angular 4アプリケーションをAngular 6に移行する

2018/10/05
SIGGRAPH 2018参加レポート-特別編（VR@50）

2018/10/03
Three.jsでVRしたい

2018/10/02
SIGGRAPH 2018参加レポート-前編

2018/09/27
ズーム可能なSVGを実装する方法の解説

2018/09/25
Kerasを用いた複数入力モデル精度向上のためのTips

2018/09/21
競技プログラミングの勉強会を開催している話

2018/09/19
Ladder Netwoksによる半教師あり学習

2018/08/10
「Maker Faire Tokyo 2018」に出展しました

2018/08/02
Kerasを用いた複数時系列データを1つの深層学習モデルで学習させる方法

2018/07/26
Apollo GraphQLでWebサービスを開発してわかったこと

2018/07/19
【深層学習】時系列データに対する１次元畳み込み層の出力を可視化

2018/07/11
きたない requirements.txt から Pipenv への移行

2018/06/26
CSS Houdiniを味見する

2018/06/25
不確実性を考慮した時系列データ予測

2018/06/20
Google Colaboratory を自分のマシンで走らせる

2018/06/18
Go言語でWebAssembly

2018/06/15
カブクエンジニア開発合宿に行ってきました 2018春

2018/06/08
2018 年の tree shaking

2018/06/07
隠れマルコフモデル 入門

2018/05/30
DASKによる探索的データ分析(EDA)

2018/05/10
TensorFlowをソースからビルドする方法とその効果

2018/04/23
EGLとOpenGLを使用するコードのビルド方法〜libGLからlibOpenGLへ

2018/04/23
技術書典4にサークル参加してきました

2018/04/13
Python で Cura をバッチ実行するためには

2018/04/04
ARCoreで3Dプリント風エフェクトを実現する〜呪文による積層造形映像制作の舞台裏〜

2018/04/02
深層学習を用いた時系列データにおける異常検知

2018/04/01
音声ユーザーインターフェースを用いた新方式積層造形装置の提案

2018/03/31
Container builderでコンテナイメージをBuildしてSlackで結果を受け取る開発スタイルが捗る

2018/03/23
ngUpgrade を使って AngularJS から Angular に移行

2018/03/14
Three.jsのパフォーマンスTips

2018/02/14
C++17の新機能を試す〜その1「3次元版hypot」

2018/01/17
時系列データにおける異常検知

2018/01/11
異常検知の基礎

2018/01/09
three.ar.jsを使ったスマホAR入門

2017/12/17
Python OpenAPIライブラリ bravado-core の発展的な使い方

2017/12/15
WebAssembly（wat）を手書きする

2017/12/14
AngularJS を Angular に移行: ng-annotate 相当の機能を TypeScrpt ファイルに適用

2017/12/08
Android Thingsで4足ロボットを作る ~ Android ThingsとPCA9685でサーボ制御)

2017/12/06
Raspberry PIとDialogflow & Google Cloud Platformを利用した、3Dプリンターボット(仮)の開発 (概要編)

2017/11/20
カブクエンジニア開発合宿に行ってきました 2017秋

2017/10/19
Android Thingsを使って3Dプリント戦車を作ろう ① ハードウェア準備編

2017/10/13
第2回 魁！！ GPUクラスタ on GKE ~PodからGPUを使う編~

2017/10/05
第1回 魁！！ GPUクラスタ on GKE ~GPUクラスタ構築編~

2017/09/13
「Maker Faire Tokyo 2017」に出展しました。

2017/09/11
PyConJP2017に参加しました

2017/09/08
bravado-coreによるOpenAPIを利用したPythonアプリケーション開発

2017/08/23
OpenAPIのご紹介

2017/08/18
EuroPython2017で2名登壇しました。

2017/07/26
3DプリンターでLチカ

2017/07/03
Three.js r86で何が変わったのか

2017/06/21
3次元データへの深層学習の適用

2017/06/01
カブクエンジニア開発合宿に行ってきました 2017春

2017/05/08
Three.js r85で何が変わったのか

2017/04/10
GCPのGPUインスタンスでレンダリングを高速化

2017/02/07
Three.js r84で何が変わったのか

2017/01/27
Google App EngineのFlexible EnvironmentにTmpfsを導入する

2016/12/21
Three.js r83で何が変わったのか

2016/12/02
Three.jsでのクリッピング平面の利用

2016/11/08
Three.js r82で何が変わったのか

2016/12/17
SIGGRAPH 2016 レポート

2016/11/02
カブクエンジニア開発合宿に行ってきました 2016秋

2016/10/28
PyConJP2016 行きました

2016/10/17
EuroPython2016で登壇しました

2016/10/13
Angular 2.0.0ファイナルへのアップグレード

2016/10/04
Three.js r81で何が変わったのか

2016/09/14
カブクのエンジニアインターンシッププログラムについての詩

2016/09/05
カブクのエンジニアインターンとして3ヶ月でやった事　〜高橋知成の場合〜

2016/08/30
Three.js r80で何が変わったのか

2016/07/15
Three.js r79で何が変わったのか

2016/06/02
Vulkanを試してみた

2016/05/20
MakerGoの作り方

2016/05/08
TensorFlow on DockerでGPUを使えるようにする方法

2016/04/27
Blenderの3DデータをMinecraftに送りこむ

2016/04/20
Tensorflowを使ったDeep LearningにおけるGPU性能調査
→
←

関連職種

Recruit

→
←

お客様のご要望に「Kabuku」はお応えいたします。
ぜひお気軽にご相談ください。

相談する
お電話でも受け付けております
03-6380-2750
営業時間：09:30～18:00
※土日祝は除く