<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
簡単なサンプルプロジェクトを作ったのでこちらに置いておきます: 
<iframe id="zenn-embedded__2da5602b1365b" src="https://embed.zenn.studio/card#zenn-embedded__2da5602b1365b" data-content="https%3A%2F%2Fgithub.com%2Fyuichkun%2Fesbuild-typescript-example" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/yuichkun/esbuild-typescript-example" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/yuichkun/esbuild-typescript-example</a>
本記事ではnode環境でもともと <code>tsc</code> コマンドでビルドを行なっていた環境から <code>esbuild</code> を使った環境への移行をしたい場合のガイドを書きます。
<h2 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> インストール</h2>
<code>npm install -D esbuild</code>
<h2 id="%E6%B3%A8%E6%84%8F%E7%82%B9%E3%81%AA%E3%81%A9">
<a class="header-anchor-link" href="#%E6%B3%A8%E6%84%8F%E7%82%B9%E3%81%AA%E3%81%A9" aria-hidden="true"></a> 注意点など</h2>
<a href="https://esbuild.github.io/content-types/#typescript" target="_blank" rel="nofollow noopener noreferrer">TypeScript</a> の項を読んでみるといくつか注意点。
<ul>
<li>TSサポート(<code>.ts</code> <code>.tsx</code>)はデフォルトで入っているので、特別必要なことはない</li>
<li>ただし、babelと同じくトランスパイルはしてくれるが、型チェックはしてくれない
<ul>
<li>
<code>tsc --noEmit</code> を別で走らせてチェックはした方がよい</li>
</ul>
</li>
<li>TSにしか存在しないシンタックスもちゃんと動作する</li>
<li>tsconfig.jsonで<code>isolatedModules</code> を有効にする必要がある
<ul>
<li>ファイルごとに並列でビルドするので、ビルド時にimportされたものが型なのか値なのか判別できないらしい</li>
</ul>
</li>
<li>tsconfig.jsonで<code>esModuleInterop</code> を有効にする必要がある
<ul>
<li>tscがデフォルトでesmをcommonjsに変換するため</li>
</ul>
</li>
<li>以下は サポートされない
<ul>
<li>
<code>emitDecoratorMetadata</code>
<ul>
<li>TSの型情報に依存した出力が必要なため</li>
</ul>
</li>
<li>
<code>const enum</code>
<ul>
<li>コンパイル時に普通の <code>enum</code> に変換される</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="tsconfig.json%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#tsconfig.json%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> tsconfig.jsonについて</h3>
esbuild実行時に <code>tsconfig.json</code> を探して、 
実行時のパスからディレクトリを上に探索する。
ただし、esbuildは <code>tsconfig.json</code> のうち次のプロパティしか参照しない
<ul>
<li><code>baseurl</code></li>
<li><code>extends</code></li>
<li><code>importsNotUsedAsValues</code></li>
<li><code>jsxFactory</code></li>
<li><code>jsxFragmentFactory</code></li>
<li><code>paths</code></li>
<li><code>useDefineForClassFields</code></li>
</ul>
ほかのプロパティは全て無視される。
<code>tsconfig.json</code> の <code>target</code> オプションも無視されるが、 
esbuild自体の方の <code>target</code> オプションで指定することができる。
<h2 id="%E3%83%93%E3%83%AB%E3%83%89%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%93%E3%83%AB%E3%83%89%E3%81%99%E3%82%8B" aria-hidden="true"></a> ビルドする</h2>
<h3 id="%E6%B3%A8%E6%84%8F%E7%82%B9">
<a class="header-anchor-link" href="#%E6%B3%A8%E6%84%8F%E7%82%B9" aria-hidden="true"></a> 注意点</h3>
entryPointsに <code>./src/*</code> のようなglobパターンを渡すことはできないらしい。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"> &gt; error: Could not resolve "./src/*.ts" (glob syntax must be expanded first before passing the paths to esbuild)
</code></pre></div>こういうエラーが出る。
<h4 id="%E7%B5%8C%E7%B7%AF">
<a class="header-anchor-link" href="#%E7%B5%8C%E7%B7%AF" aria-hidden="true"></a> 経緯</h4>
<a href="https://github.com/evanw/esbuild/issues/976" target="_blank" rel="nofollow noopener noreferrer">この辺のissue</a> で議論があり、globの展開はshellが行なっているので、shell-agnosticにesbuildを保つため、globの展開は自分でやれ とのこと。
<h2 id="%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88">
<a class="header-anchor-link" href="#%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88" aria-hidden="true"></a> スクリプト</h2>
<div class="code-block-container">
<div class="code-block-filename-container">./scripts/build.js</div>
<pre class="language-js"><code class="language-js">const { build } = require('esbuild')
const glob = require('glob')
const entryPoints = glob.sync('./src/**/*.ts')// 適宜読み替えてください

build({
 entryPoints,
 outbase: './src', // outbaseを指定することで指定したディレクトリの構造が出力先ディレクトリに反映されるようになる,
 outdir: './lib', // 出力先ディレクトリ
 platform: 'node', // 'node' 'browser' 'neutral' のいずれかを指定,
 external: [], // バンドルに含めたくないライブラリがある場合は、パッケージ名を文字列で列挙する,
 watch: false // trueにすれば、ファイルを監視して自動で再ビルドしてくれるようになる
})
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">package.json</div>
<pre class="diff-highlight "><code class="diff-highlight ">- "build": 'tsc'
+ "build": 'node ./scripts/build.js',
</code></pre>
</div>これでビルドできるようになる。
<h3 id="%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%83%91%E3%82%A4%E3%83%AB%E9%80%9F%E5%BA%A6">
<a class="header-anchor-link" href="#%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%83%91%E3%82%A4%E3%83%AB%E9%80%9F%E5%BA%A6" aria-hidden="true"></a> トランスパイル速度</h3>
サンプルプロジェクトを筆者の手元でトランスパイルした結果
<ul>
<li>
<code>tsc</code>: 3.34s</li>
<li>
<code>esbuild</code>: 0.35s</li>
</ul>
約9.5倍↑
<h3 id="%E3%81%8A%E3%81%BE%E3%81%91">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91" aria-hidden="true"></a> おまけ</h3>
こういうプラグインがあった。 
globでのimportを自動でやってくれそう？
<iframe id="zenn-embedded__4d8f097c066c7" src="https://embed.zenn.studio/card#zenn-embedded__4d8f097c066c7" data-content="https%3A%2F%2Fgithub.com%2Fthomaschaaf%2Fesbuild-plugin-import-glob" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/thomaschaaf/esbuild-plugin-import-glob" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/thomaschaaf/esbuild-plugin-import-glob</a>

TypeScriptのビルドをesbuildで置き換えてみる

Discussion