构建工具

tsup 和 Rollup

tsup 和 Rollup都是前端/Node.js 项目中的打包工具，常用于构建 TypeScript 库、工具或组件库，但它们在设计理念、性能、扩展性和适用场景上有明显区别

🧠 简要概括

特性	tsup	Rollup
构建速度	🚀 极快（基于 esbuild）	🐢 较慢（AST 转换，基于插件系统）
配置复杂度	🌟 零配置起步，适合快速开发	⚙️ 配置复杂，适合高度定制
插件系统	简单或不可扩展（依赖 esbuild 插件）	非常强大、生态成熟（大量插件）
输出格式	ESM / CJS / IIFE	ESM / CJS / IIFE / AMD 等
Tree-shaking	✅ 自动支持（通过 esbuild）	✅ 高度优化，原生支持
代码分割	❌ 默认关闭，支持有限（适合库，不适合应用）	✅ 支持代码分割
打包类型声明	✅ 内置（开启 dts: true）	❌ 需额外使用 tsc 或 rollup-plugin-dts
常见用途	TypeScript 工具包 / CLI / 轻量组件库	Vue/React 组件库 / 高度定制打包 / UMD 库
依赖体积	较小	通常较大（插件、babel）

✅ 使用场景对比

场景	推荐工具	理由
快速开发 TypeScript 库	tsup	快速、无需配置、内置支持 .d.ts
构建 CLI 工具（Node.js）	tsup	支持 shebang，目标明确，体积小
构建 React/Vue 组件库	Rollup	插件丰富、输出格式灵活、支持样式和图片等资源
构建大型前端库（含样式/国际化等）	Rollup	可扩展性强，适合复杂打包需求
多入口文件复杂项目	Rollup	更灵活的入口与输出控制
打包业务型 SPA 项目	❌ 两者都不推荐	推荐用 Vite/Webpack

🛠 实际使用体验对比

tsup 示例

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

或者用配置文件

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

Rollup 示例

// rollup.config.js
import typescript from '@rollup/plugin-typescript'

export default {
  input: 'src/index.ts',
  output: [
    { file: 'dist/index.esm.js', format: 'esm' },
    { file: 'dist/index.cjs.js', format: 'cjs' }
  ],
  plugins: [typescript()]
}

需要：

• 安装 rollup、@rollup/plugin-typescript
• 单独生成 .d.ts（如用 tsc 或 rollup-plugin-dts）

✅ 总结一句话

• 如果你要 快速构建一个 TypeScript 工具包/库，用 tsup；
• 如果你要构建一个 更复杂、可控性高的前端库或组件库，用 Rollup。