esbuildをプロダクトに導入して半分成功して半分挫折した話

esbuild速え。。。大興奮だ！魔法のよう

これはやばい。やばいのきた。
JavaScript（TS含む）のトランスパイルがすこぶる高速なesbuildなるものがえらい急激に盛り上がってるようです。
いつだって開発のエコシステムに新しいものを取り入れるのはしんどさもありますが、
なんたってこのesbuildの触れ込みを見ると、●●のうん十倍〜100倍トランスパイルが速いだとか。
ちょうど自分が今やっているプロダクトが、ローカル開発でもCircleCIのデプロイビルドでも致命的に時間がかかっていたんで、
ここに挑戦する価値はもはや十分だと、ちょっと試してみました。

プロダクトの構成ざっくり

• フロントもバックもNodeJS（Nuxtとか、expressとか、そんなとこ）
• というわけで、どちらもWebpack＆babelビルド（バックエンドはbackpack）
• どちらも全コードTypeScript
• フロントはjsx (パンダさんありがとう vue-tsx-support vue3が本格onになるまで最高だと思ってます)

試そうと思った理由

• JavaScriptのビルド（その他cssとかもろもろそうだけど）のトランスパイルのビルド時間が長すぎて辟易としてた（Webpackのhardsourceキャッシュは壊れる事を意識する事自体が苦）
• ちょいと前に試した vite のローカル開発が、異常なくらいビルドが早くて、esbuildかなり気になってた（esbuildだけの成果じゃないとしても、もう異常なくらい速かったので気になった）
• 関わるPJが増えた（あっちの作業してて、別PJのちょっとしたレイアウト修正をやるためにNuxtとwebpack+babel起動してバンドル生成待ち、、を繰り返すのがいやだし、この体験をチームに引き継ぐのがすごいいやだった）
• プレーンなJSでWebを作るのは、もはや無理（反論みとめまへん。kintoneのプラグイン書いている時もクロスブラウザ意識したりとかしてると生産性落ちるので、結局babelってる）
• ★いまだに「JavaScriptは素晴らしい」という気持ちが強い。ビルドの遅さっていうネガティブなイメージで汚したくない

今回のプロダクトに導入した所感

よかったこと

• バックエンド（NodeJSランタイム側）用のバンドルは、CiecleCIでのビルドに3分から5分くらい要していたのが5秒くらいになった。TSのtypecheckを別出ししたんでフェアにそれを加味したとしてもtypecheckは10秒程度なので、劇的というか魔法のように速くなった
• デグレは今のとこまったくなし
• babelからの差し替えもすっごい楽チン。webpackでts-loader挟んでたとこを置き換えただけ

残念だった（できなかった）事

• フロント（Nuxt2）のビルドに採用できなかった

Nuxt（Vue + tsx）への導入の苦戦

ぱっと利用できるビルドモジュールがない

Nuxt ESBuild module っていうのをまず試したものの、TS利用環境でそのまま利用するとimportの拡張子に「.ts（tsx）」とか記述しないとパス解決できなく、自前でbuild-moduleを作る事にしてここは解決できた。

j(t)sx

ESBuild自体は、パラメータで指定したJSXFactory名をちゃんと理解してコードをトランスパイルしてくれるものの、
僕の愛しているわんだふるぱんださんの VueTsxSupport なんか Not Foundだ と実行時にエラーになる。（ちなみにVueTsxSupport固有の問題ではなく、vueのjsxでesbuild使う時の問題）
こんな仕組み で、vue2の$createElementを注入してやる必要があるんだけど、
babel通すとESBuildの利用価値がほぼなくなるので、やるなら自前で書くしかないし、書いている間にプロダクションReadyなviteとか、Nuxtとかやってきそうな気がしてやめた。

ES5（IE11向け）へのトランスパイルができない

いちおうtargetに es5 を指定する事はできるんだけど、まだようやっと「本当はやるべきじゃないと思ってたけど、希望多いからやるかぁ」な感じらしく、「ごめんねまだ準備できてない」エラー吐いてプロセス落ちる。
https://github.com/evanw/esbuild/issues/297
じゃあ、ESBuildが処理した結果をbabelるかぁ、と思ってすぐ「それ意味なくね」と思ってやめた。

現時点採用する価値あるか

Nuxt3でも採用をうたっている、viteもすでに採用している、そのほかググると結構採用事例や予定のソースが多く、
今後デファクトになる可能性はとても高いと思ってるっていうのを踏まえた上で、
以下のような人はすぐにでも使う価値はとってもあると思う（babelからの差し替えも結構楽だし、Webpack併用でも十分効果出る）

• NodeJSオンリーのトランスフォームをしたい人
• IE11を考慮しなくて良い人（インハウス向けのWebとか、インハウス向けのkintoneカスタマイズとか、、）
• Vue（2系） with jsxをつこてないプロジェクト
• 今絶賛開発進行中のプロダクトを持ってて、ローンチの頃にはesbuildがes5へのトランスパイルを対応している事をどきどきしながら信じてみたいギャンブラー

ていうか

Nuxt3 or viteのSSRプラグインの安定したの、はやくこないかなぁ。