esbuildがwebpackより187倍早いらしいので環境構築しよう

はじめに

久しぶりの投稿になります。
今回は以下の記事で、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/tsukuha/esbuild-tmp

Buildスクリプトの作成

まず最低限、以下の条件を実現したいです。

• developmentとproductionの環境でBuildを分ける
• エントリーポイントの指定
• Build後に出力されるESの規格の指定
• プラットフォームの指定（node, browser）
• production時にはminifyをかける
• 出力先ディレクトリの指定
• tsconfig.jsonの読み込み

以上の条件を元に作成した、esbuildのBuildファイルは以下の通りです。

build.ts

const { argv } = require('process')
const { build } = require('esbuild')
const path = require('path')
// optionsの定義
const options = {
  // 以下の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を利用している場合、かなりの効果を発揮するかもしれませんね！！

もし何か質問やご指摘などありましたらお願いします！