tsupの使い方メモ

tsupって何

少ない設定でTypeScriptコードをバンドルしてくれるツール。
内部でesbuildを使用している。

tsup tsup.egoist.dev

bundle typescript library with ease

GitHub - egoist/tsup: The simplest and fastest way to bundle your TypeScript libraries. github.com

The simplest and fastest way to bundle your TypeScript libraries. - egoist/tsup

tsupを使うと何が嬉しいの

tsupの使い方

pnpm add -D tsup
tsup src/index.ts

これだけでdist/index.jsが生成される。

tsupの設定の仕方

以下のtsup.config.tsを作成する。

import { defineConfig } from 'tsup'

export default defineConfig({
  entry: ['src/index.ts']
})

すると、さっきのtsup src/index.tsは単にtsupと打つだけで同じ設定でバンドルを実行できる。

型定義ファイル（`*.d.ts`）も同時に出力したい

tsup --dtsのように--dtsオプションを付けるか、tsup.config.tsにdts: trueを追加する。

import { defineConfig } from 'tsup'

export default defineConfig({
  entry: ['src/index.ts'],
  dts: true
})

tsconfig.jsonの.compilerOptionsにincrementalがtrueになっているとき、tsup --dtsを実行するとエラーが発生することがある。

error TS5074: Option '--incremental' can only be specified using tsconfig, emitting to single file or when option '--tsBuildInfoFile' is specified.

これを解決するためには、エラーメッセージにあるようにtsconfig.jsonの.compilerOptionsにtsBuildInfoFileプロパティを追加する。

{
  // ...
  "compilerOptions": {
    // ...
    "incremental": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
  }
}

ESM/CJSの両方に対応するときの`tsup`や`package.json`の書き方

import { defineConfig } from 'tsup'

export default defineConfig({
  format: ['esm', 'cjs'],
  entry: ['src/index.ts'],
  sourcemap: true,
  dts: true
})

{
  // ...
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.ts",
        "import": "./dist/index.js"
      },
      "require": {
        "types": "./dist/index.d.cts",
        "require": "./dist/index.cjs"
      }
    }
  }
  // ...
}