esbuildでライブラリを作る（TypeScript対応）
以前、viteでライブラリを作る方法を説明しました。
今回はesbuildを利用してライブラリの作成方法を説明します。
esbuildを使うと非常に簡単で爆速な開発体験ができます。
ただし viteで作る場合と違う点としてUMDをサポートしませんので、ブラウザならESM対応(<script type="module">)か事前のバンドラーによる処理が必要になります。（CommonJSには対応しているので、Node.jsに関しては特別な処置は不要です。）
esbuildの導入
まずインストールからです。
npm install -D esbuild concurrently
（concurrentlyは本来不要ですが、最適化のために入れています）
あとは下記のようにscriptを設定すれば終わりです。
{
...
"scripts": {
"build": "concurrently --raw \"npm run build:mjs\" \"npm run build:cjs\"",
"build:mjs": "esbuild lib/main.ts --bundle --minify --format=esm --outfile=dist/lib-name.mjs",
"build:cjs": "esbuild lib/main.ts --bundle --minify --format=cjs --outfile=dist/lib-name.cjs"
},
...
}
lib/main.tsはエントリーポイントで、dist/lib-name.mjsとdist/lib-name.cjsは出力ファイルの指定です。
npm run buildでビルドされます。
少しオプションの説明をすると、
--bundleで変換のみでなくバンドルを行い、--minifyで最小化をしています。
また、--formatを使って、esm（ESModule）とcjs（CommonJS）の両方を出力しています。。
では、これらをパッケージファイルとして指定するためのpakcage.jsonの設定をしていきましょう。
package.json
以下のように指定することで、ブラウザとNodeどちらも対応できます。
{
"main": "./dist/lib-name.cjs",
"module": "./dist/lib-name.mjs",
"exports": {
"import": "./dist/lib-name.mjs",
"require": "./dist/lib-name.cjs"
},
}
TypeScript対応
まずはインストールからです。
npm install -D typescript
そして、tsconfig.jsonを下記のように設定します。
tsconfig.json の設定値についてはライブラリ作成に直接関連しないものも含まれています。
詳しくは以下で説明しているのでよかったら読んでみてください。
次に、生成される定義ファイルをpackage.jsonで指定します。
{
...
"types": "./types/main.d.ts",
...
}
パッケージに含めるファイルの指定
dist（配布フォルダ）とtypes（型定義フォルダ）を含める必要があるので、下記のように指定します。
{
...
"files": [
"/dist",
"/types"
],
...
}
公開
パッケージの公開については、以下のサイトがうまくまとめているので参照してください。
といっても、
- 公式サイトでNPMアカウントの作成
npm login-
npm publish（scope=@～/を付ける場合は、--access=publicも必要）
をするだけです。
バージョンとライセンスは好きなものを設定しましょう。
あわせて読みたい
テストの追加方法も載せているので、是非読んでいただければと思います。
Discussion