https://uga-box.hatenablog.com/entry/2025/03/06/000000

tsupというTypeScript向けバンドラーを知ったので調べた

tsup.egoist.dev

tsupは、TypeScriptでライブラリを開発する場合に、設定ファイルなしでシンプルに使えるバンドラー

内部的にはesbuildを利用している

tsupの特徴

設定ファイル不要のシンプルなバンドラー

エントリーポイントを指定するだけで動作するため、従来のWebpackやRollupと比べてセットアップが圧倒的に楽

依存関係の自動除外

デフォルトでdependenciesやpeerDependenciesをバンドルから除外する仕組みがある

ライブラリ開発では、これらを含めないことが一般的なため、デフォルトの動作が最適化されている

型定義ファイルの生成

--dtsオプションを指定するだけで、.d.tsの型定義ファイルを出力できる

複数形式での出力

CommonJS（CJS）、ES Modules（ESM）、IIFEの形式で出力可能

ライブラリとして配布する際、複数の形式に対応できるのが便利

高速なビルド

esbuildを活用しているため、ビルド速度が非常に速い

大規模なコードベースでも高速にバンドルできる

環境変数の設定が可能

ビルド時に環境変数を埋め込むことができ、process.env.* や import.meta.env.* の形式で利用可能

CLIアプリのビルドもサポート

エントリーファイルにshebang（#!/usr/bin/env node）が含まれている場合、自動的に実行権限を付与

出力の最小化（Minify）

デフォルトでesbuildのminify機能を利用可能

より高度な最適化を行いたい場合は、terserを使うこともできる

tsupの使い方

1. tsupのインストール

まずは、tsupとTypeScriptをインストール

npm install -D typescript tsup

2. 設定ファイルの作成（オプション）

設定ファイルを作らなくても動作するが、より細かく設定したい場合はtsup.config.tsを作成

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  minify: true,
  sourcemap: true,
  clean: true, // Clean output directory before each build
});

他の設定は以下にある

https://unpkg.com/browse/tsup@8.4.0/dist/index.d.ts#L401

3. ビルドの実行

設定ファイルなしで実行する場合

npx tsup src/index.ts --format esm,cjs --dts

設定ファイルを使う場合

npx tsup