最近開発環境を改善する機会が減っていて、Babelやらwebpackやらの情報を追っていませんでした。が、チームメンバーが爆速なesbuildを導入してくれて感動したのを機に、久々にフロントエンドの開発環境について考えてみました。

今回は手始めに、初めてesbuildに触ったときに感じた「これなに」「どう使うの」「気をつけることは」あたりを書き置きしておきます。ちなみに執筆時点でのesbuildのバージョンは0.12.28です。

esbuild とは

An extremely fast JavaScript bundler

とにかく速さに重点を置いたバンドラのようです。バンドラということは、並列で比較できるものはwebpack、rollup.jp、Parcelなどです。バンドルと同時にトランスパイルもしてくれるようなので、その点で言えばtscやBabelが比較対象になるでしょう。

esbuildは標準で、JS、JSX、TS、TSX、CSS、JSONなどを解釈しバンドルします。パッと見た感じはビルドに必要な一連の処理を担ってくれる印象ですが、ES5への変換に未対応だったり、TypeScriptを解釈するものの型チェックはしなかったりと、ビルド時によく使われる機能が一部ないので、利用の際は要件に合うかの確認が必要そうです。

使い方

  1. npm install -D esbuild
  2. npx esbuild --bundle ./index.js

configファイルなしで実行できるので、npm installして即利用できます。基本的なオプションも揃っています。

Option 効果
--bundle 依存関係をインライン化します。esbuildはデフォルトでは依存関係をバンドルに含まないので、明示的に有効化する必要があります。
--minify ビルドしたファイルを圧縮します。
--watch ウォッチモードを有効にします。ファイルの変更を検知して再ビルドが走るようになります。
--target
例: -target=es2020,chrome58,node12		 ビルド後に生成するJSのターゲット環境を指定します。デフォルトはesnextです。
--sourcemap sourcemapを生成します。
--define
例: --define:DEBUG=true		 グローバル変数を定義します。
--splitting Code Splitting を有効化しますが、まだWIPのオプションです。

自分がよく使いそうなものをピックアップしました。これ以外のオプションは公式をご確認ください。

利用例

ES5に変換できないので、Production buildには使いにくいのが現状です。ですのでProduction buildは今まで通りwebpackを使って、Development buildにesbuildを利用するのが無難だと思います。esbuild-loaderを使うとwebpack上でesbuildを利用できます。

気をつけたいこと

まだBeta版ということもあって気をつけたほうが良いことはいっぱいあるとは思いますが、私がドキュメントやIssueを見ていて目に止まった部分を書き置きしておきます。

CSS Modules未対応

  • 0.7.7でExperimentalなCSSのサポートを開始
  • sass/scssの対応はまだの様子
  • Issueにて議論中

tsconfigの解釈

  • TS, TSXをビルドするときはtsconfigの設定を読み取る
  • tsconfigの特定フィールドのみ参照される、詳細は公式にて

動的import, Code Splittingの展望

  • 動的importの構文には対応している
  • 現時点ではCode SplittingはESMのみ対応してるが、ほかのモジュール形式も対応していくつもり
  • Issueにて議論中

ES5との付き合い方

  • --target=es5とした場合、元々ES5のコードはES5のままになるが、ES6のコードをES5に変換することはない
  • 今後ES5に対応することはなさそう
  • 参考Issueはこちら

top-lebel await未対応

  • 今後もしばらくは対応できそうにない
  • 細かい議論はIssueにて

おわり

以上、簡単ですがesbuildについての書き置きです。
冒頭にも書いたように、最近は環境構築する頻度が減っているので、おそらく数カ月後に久々にesbuildを使おうとして右往左往している自分がいることでしょう。そのときに少しでも役立てばいいなと思います(バージョンが進んでほとんど役立たなくなっているかもしれませんが😫)。