jpskill.com
🛠️ 開発・MCP コミュニティ

tsdownライブラリバンドル

tsdown

Rolldownの高速処理により、TypeScriptとJavaScriptライブラリをバンドルし、型宣言の生成や複数フォーマットへの対応、tsupからの移行を支援するSkillです。

📜 元の英語説明(参考)

Bundle TypeScript and JavaScript libraries with blazing-fast speed powered by Rolldown. Use when building libraries, generating type declarations, bundling for multiple formats, or migrating from tsup.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Rolldownの高速処理により、TypeScriptとJavaScriptライブラリをバンドルし、型宣言の生成や複数フォーマットへの対応、tsupからの移行を支援するSkillです。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o tsdown.zip https://jpskill.com/download/5827.zip && unzip -o tsdown.zip && rm tsdown.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/5827.zip -OutFile "$d\tsdown.zip"; Expand-Archive "$d\tsdown.zip" -DestinationPath $d -Force; ri "$d\tsdown.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して tsdown.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → tsdown フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

tsdown - エレガントなライブラリバンドラー

RolldownとOxcを搭載した、TypeScript/JavaScriptライブラリ向けの超高速バンドラーです。

使用する場面

  • npm向けTypeScript/JavaScriptライブラリの構築
  • TypeScript宣言ファイル(.d.ts)の生成
  • 複数のフォーマット(ESM、CJS、IIFE、UMD)でのバンドル
  • ツリーシェイキングとミニファイによるバンドルの最適化
  • 最小限の変更でtsupからの移行
  • React、Vue、Solid、またはSvelteコンポーネントライブラリの構築

クイックスタート

# インストール
pnpm add -D tsdown

# 基本的な使い方
npx tsdown

# 設定ファイルを使用する場合
npx tsdown --config tsdown.config.ts

# ウォッチモード
npx tsdown --watch

# tsupからの移行
npx tsdown-migrate

基本的な設定

import { defineConfig } from 'tsdown'

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

コア参照

トピック 説明 参照
はじめに インストール、最初のバンドル、CLIの基本 guide-getting-started
設定ファイル 設定ファイルの形式、複数の設定、ワークスペース option-config-file
CLIリファレンス すべてのCLIコマンドとオプション reference-cli
tsupからの移行 移行ガイドと互換性に関する注意点 guide-migrate-from-tsup
プラグイン Rolldown、Rollup、Unpluginのサポート advanced-plugins
フック カスタムロジックのためのライフサイクルフック advanced-hooks
プログラムAPI Node.jsスクリプトからのビルド advanced-programmatic
Rolldownオプション Rolldownに直接オプションを渡す advanced-rolldown-options
CI環境 CI検出、'ci-only' / 'local-only' の値 advanced-ci

ビルドオプション

オプション 使用法 参照
エントリーポイント entry: ['src/*.ts', '!**/*.test.ts'] option-entry
出力フォーマット format: ['esm', 'cjs', 'iife', 'umd'] option-output-format
出力ディレクトリ outDir: 'dist', outExtensions option-output-directory
型宣言 dts: true, dts: { sourcemap, compilerOptions, vue } option-dts
ターゲット環境 target: 'es2020', target: 'esnext' option-target
プラットフォーム platform: 'node', platform: 'browser' option-platform
ツリーシェイキング treeshake: true、カスタムオプション option-tree-shaking
ミニファイ minify: true, minify: 'dce-only' option-minification
ソースマップ sourcemap: true, 'inline', 'hidden' option-sourcemap
ウォッチモード watch: true、ウォッチオプション option-watch-mode
クリーニング clean: true、クリーンパターン option-cleaning
ログレベル logLevel: 'silent', failOnWarn: 'ci-only' option-log-level

依存関係の処理

機能 使用法 参照
外部依存関係 external: ['react', /^@myorg\//] option-dependencies
インライン依存関係 noExternal: ['dep-to-bundle'] option-dependencies
自動外部化 自動的なpeer/dependencyの外部化 option-dependencies

出力の強化

機能 使用法 参照
シム shims: true - ESM/CJS互換性の追加 option-shims
CJSデフォルト cjsDefault: true (デフォルト) / false option-cjs-default
パッケージエクスポート exports: true - exportsフィールドの自動生成 option-package-exports
CSS処理 [実験的] まだ開発中です option-css
アンバンドルモード unbundle: true - ディレクトリ構造の保持 option-unbundle
パッケージ検証 publint: true, attw: true - パッケージの検証 option-lint

フレームワークとランタイムのサポート

フレームワーク ガイド 参照
React JSXトランスフォーム、Fast Refresh recipe-react
Vue SFCサポート、JSX recipe-vue
WASM rolldown-plugin-wasm を介したWebAssemblyモジュール recipe-wasm

一般的なパターン

基本的なライブラリバンドル

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

複数のエントリーポイント

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

ブラウザライブラリ (IIFE/UMD)

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['iife'],
  globalName: 'MyLib',
  platform: 'browser',
  minify: true,
})

Reactコンポーネントライブラリ

export default defineConfig({
  entry: ['src/index.tsx'],
  format: ['esm', 'cjs'],
  dts: true,
  external: ['react', 'react-dom'],
  plugins: [
    // React Fast Refresh support
  ],
})

ディレクトリ構造の保持

export default defineConfig({
  entry: ['src/**/*.ts', '!**/*.test.ts'],
  unbundle: true, // ファイル構造を保持
  format: ['esm'],
  dts: true,
})

CI対応の設定

export defaul
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

tsdown - The Elegant Library Bundler

Blazing-fast bundler for TypeScript/JavaScript libraries powered by Rolldown and Oxc.

When to Use

  • Building TypeScript/JavaScript libraries for npm
  • Generating TypeScript declaration files (.d.ts)
  • Bundling for multiple formats (ESM, CJS, IIFE, UMD)
  • Optimizing bundles with tree shaking and minification
  • Migrating from tsup with minimal changes
  • Building React, Vue, Solid, or Svelte component libraries

Quick Start

# Install
pnpm add -D tsdown

# Basic usage
npx tsdown

# With config file
npx tsdown --config tsdown.config.ts

# Watch mode
npx tsdown --watch

# Migrate from tsup
npx tsdown-migrate

Basic Configuration

import { defineConfig } from 'tsdown'

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

Core References

Topic Description Reference
Getting Started Installation, first bundle, CLI basics guide-getting-started
Configuration File Config file formats, multiple configs, workspace option-config-file
CLI Reference All CLI commands and options reference-cli
Migrate from tsup Migration guide and compatibility notes guide-migrate-from-tsup
Plugins Rolldown, Rollup, Unplugin support advanced-plugins
Hooks Lifecycle hooks for custom logic advanced-hooks
Programmatic API Build from Node.js scripts advanced-programmatic
Rolldown Options Pass options directly to Rolldown advanced-rolldown-options
CI Environment CI detection, 'ci-only' / 'local-only' values advanced-ci

Build Options

Option Usage Reference
Entry points entry: ['src/*.ts', '!**/*.test.ts'] option-entry
Output formats format: ['esm', 'cjs', 'iife', 'umd'] option-output-format
Output directory outDir: 'dist', outExtensions option-output-directory
Type declarations dts: true, dts: { sourcemap, compilerOptions, vue } option-dts
Target environment target: 'es2020', target: 'esnext' option-target
Platform platform: 'node', platform: 'browser' option-platform
Tree shaking treeshake: true, custom options option-tree-shaking
Minification minify: true, minify: 'dce-only' option-minification
Source maps sourcemap: true, 'inline', 'hidden' option-sourcemap
Watch mode watch: true, watch options option-watch-mode
Cleaning clean: true, clean patterns option-cleaning
Log level logLevel: 'silent', failOnWarn: 'ci-only' option-log-level

Dependency Handling

Feature Usage Reference
External deps external: ['react', /^@myorg\//] option-dependencies
Inline deps noExternal: ['dep-to-bundle'] option-dependencies
Auto external Automatic peer/dependency externalization option-dependencies

Output Enhancement

Feature Usage Reference
Shims shims: true - Add ESM/CJS compatibility option-shims
CJS default cjsDefault: true (default) / false option-cjs-default
Package exports exports: true - Auto-generate exports field option-package-exports
CSS handling [experimental] Still in development option-css
Unbundle mode unbundle: true - Preserve directory structure option-unbundle
Package validation publint: true, attw: true - Validate package option-lint

Framework & Runtime Support

Framework Guide Reference
React JSX transform, Fast Refresh recipe-react
Vue SFC support, JSX recipe-vue
WASM WebAssembly modules via rolldown-plugin-wasm recipe-wasm

Common Patterns

Basic Library Bundle

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

Multiple Entry Points

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

Browser Library (IIFE/UMD)

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['iife'],
  globalName: 'MyLib',
  platform: 'browser',
  minify: true,
})

React Component Library

export default defineConfig({
  entry: ['src/index.tsx'],
  format: ['esm', 'cjs'],
  dts: true,
  external: ['react', 'react-dom'],
  plugins: [
    // React Fast Refresh support
  ],
})

Preserve Directory Structure

export default defineConfig({
  entry: ['src/**/*.ts', '!**/*.test.ts'],
  unbundle: true, // Preserve file structure
  format: ['esm'],
  dts: true,
})

CI-Aware Configuration

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  failOnWarn: 'ci-only',
  publint: 'ci-only',
  attw: 'ci-only',
})

WASM Support

import { wasm } from 'rolldown-plugin-wasm'
import { defineConfig } from 'tsdown'

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

Advanced with Hooks

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  hooks: {
    'build:before': async (context) => {
      console.log('Building...')
    },
    'build:done': async (context) => {
      console.log('Build complete!')
    },
  },
})

Configuration Features

Multiple Configs

Export an array for multiple build configurations:

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

Conditional Config

Use functions for dynamic configuration:

export default defineConfig((options) => {
  const isDev = options.watch
  return {
    entry: ['src/index.ts'],
    format: ['esm', 'cjs'],
    minify: !isDev,
    sourcemap: isDev,
  }
})

Workspace/Monorepo

Use glob patterns to build multiple packages:

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

CLI Quick Reference

# Basic commands
tsdown                          # Build once
tsdown --watch                  # Watch mode
tsdown --config custom.ts       # Custom config
npx tsdown-migrate              # Migrate from tsup

# Output options
tsdown --format esm,cjs        # Multiple formats
tsdown --outDir lib            # Custom output directory
tsdown --minify                # Enable minification
tsdown --dts                   # Generate declarations

# Entry options
tsdown src/index.ts            # Single entry
tsdown src/*.ts                # Glob patterns
tsdown src/a.ts src/b.ts       # Multiple entries

# Development
tsdown --watch                 # Watch mode
tsdown --sourcemap             # Generate source maps
tsdown --clean                 # Clean output directory

Best Practices

  1. Always generate type declarations for TypeScript libraries:

    { dts: true }
  2. Externalize dependencies to avoid bundling unnecessary code:

    { external: [/^react/, /^@myorg\//] }
  3. Use tree shaking for optimal bundle size:

    { treeshake: true }
  4. Enable minification for production builds:

    { minify: true }
  5. Add shims for better ESM/CJS compatibility:

    { shims: true }  // Adds __dirname, __filename, etc.
  6. Auto-generate package.json exports:

    { exports: true }  // Creates proper exports field
  7. Use watch mode during development:

    tsdown --watch
  8. Preserve structure for utilities with many files:

    { unbundle: true }  // Keep directory structure
  9. Validate packages in CI before publishing:

    { publint: 'ci-only', attw: 'ci-only' }

Resources