はじめに
久しぶりの投稿になります。
今回は以下の記事で、esbuidがすごい！！という話を聞きつけこの記事を書くことにしました。
参考: [Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない
どのくらいすごいのでしょうか？
参考に挙げている記事によると
esbuild は Go 言語で書かれた JavaScript および TypeScript のビルドツールです。 esbuild 単体でトランスパイル + バンドル + ミニファイできます。 JSX / TSX もサポートされています。そしてめっちゃくちゃ速いという触れ込みです。最初から速度を意識して無駄がないように書かれており、構文解析・出力・ソースマップ生成は並列化され、ネイティブコードで動作します。公式の README では three.js のビルドが Rollup + terser より 100 倍速い と謳っています。
https://www.kabuku.co.jp/developers/ultrafast-tsx-build-tool-esbuild
とのことです。
なるほどなるほどと。最近わたしもWebpackのBuild遅いなあと思っていたのでこの情報を鵜呑みにして、esbuildの環境構築をしたくなりました。
また、ドキュメントによるとesbuildはwebpackの187倍もBuildが早いみたいです。
esbuildの環境構築
環境構築についてですが、だいたいのモジュールバンドラにはコンフィグファイルがつきものです。esbuildのgithubを参考にしましたが、ワンライナーのCL上での実行例のみでコンフィグファイルらしいものの書き方見当たりません。
少し詳細に調べたところ、
https://github.com/evanw/esbuild/issues/39
以下に書いてありました。
ふむふむ、一応、対応はしているみたいです。
前準備
今回は、React+TypeScriptで記述されたプロジェクトを対象にBuildを行う環境構築をします。Vueについては、viteというモジュールバンドラがesbuildを利用して、Buildを行っているため、そちらを利用してくださいとのことです。
まずは以下の通りにnpmモジュールをインストールします。npm install -D esbuild @types/node
Reactのプロジェクトは後ほど説明する注意点に気をつければなんでも大丈夫です。
わたしのgithubのプロジェクトを例に説明します。
https://github.com/olt556/esbuild-tmp
Buildスクリプトの作成
まず最低限、以下の条件を実現したいです。
- developmentとproductionの環境でBuildを分ける
- エントリーポイントの指定
- Build後に出力されるESの規格の指定
- プラットフォームの指定（node, browser）
- production時にはminifyをかける
- 出力先ディレクトリの指定
- tsconfig.jsonの読み込み
以上の条件を元に作成した、esbuildのBuildファイルは以下の通りです。
const{argv}=require('process')const{build}=require('esbuild')constpath=require('path')// optionsの定義constoptions={// 以下のdefineプロパティを設定しない場合Reactのプロジェクトの実行時にエラーが出ますdefine:{'process.env.NODE_ENV':process.env.NODE_ENV},entryPoints:[path.resolve(__dirname,'src/Index.tsx')],minify:argv[2]==='production',bundle:true,target:'es2016',platform:'browser',outdir:path.resolve(__dirname,'dist'),tsconfig:path.resolve(__dirname,'tsconfig.json')}// Buildの実行build(options).catch(err=>{process.stderr.write(err.stderr)process.exit(1)})上記のファイルを以下のnodeコマンドで実行することでBuild可能です。node build.ts production/development
npmスクリプトにして実行しやすくするのもいいかもしれませんね。
実装時の注意点（2020/08/24）
現時点でesbuildを利用する際には、以下のような注意点があります。
TypeScriptのトランスパイル時の型チェックに対応していませんcss-modulesに対応していませんpluginsに対応していないので、各種loaderの読み込みや詳細な設定をすることはできません
おわりに
webpackをesbuildに置き換えることによって、Reactを導入しているプロジェクトがCSSフレームワークや、CSS in JSを利用している場合、かなりの効果を発揮するかもしれませんね！！
もし何か質問やご指摘などありましたらお願いします！