TypeScript Package 模板

TypeScript Package 模板提供轻量的纯 TypeScript 包开发环境，适合开发 HTTP 客户端、storage 适配器、通用 utils、SDK 等不绑定框架的基建模块。如果要开发 Vue SFC 组件，请使用 Component 模板。

技术栈

• TypeScript - 类型安全的包开发体验 (文档)
• tsup - 输出 ESM、CJS、source map 和类型声明 (文档)
• ESBuild - tsup 底层使用的快速转换能力 (文档)
• pnpm workspace - 作为 monorepo 内的 app template 运行

快速开始

创建项目

vup init my-project
cd my-project

vup add my-package
# 选择 Package 模板

安装依赖

pnpm install

开发

cd apps/my-package
pnpm dev

项目结构

apps/my-package/
├── src/
│   ├── http/
│   │   └── index.ts        # 基建模块示例
│   └── index.ts            # 根入口聚合导出
├── tsup.config.ts          # 构建入口和输出配置
├── tsconfig.json           # TypeScript 配置
├── package.json            # 包元信息和 exports
└── README.md

模块约定

• 一个可复用能力一个目录，例如 src/http/、src/socket/、src/storage/。
• 每个模块入口负责导出自己的公开类型和函数。
• src/index.ts 只做根入口聚合。
• 如果要支持子路径引入，需要同步维护 tsup.config.ts 的 entry 和 package.json 的 exports。

引入示例：

import { http } from 'your-package';
import { HttpClient } from 'your-package/http';

构建产物

模板会构建到 .output/：

.output/
├── index.js
├── index.cjs
├── index.d.ts
└── http/
    ├── index.js
    ├── index.cjs
    └── index.d.ts

package.json 需要显式映射每个公开入口：

{
  "exports": {
    ".": {
      "types": "./.output/index.d.ts",
      "import": "./.output/index.js",
      "require": "./.output/index.cjs"
    },
    "./http": {
      "types": "./.output/http/index.d.ts",
      "import": "./.output/http/index.js",
      "require": "./.output/http/index.cjs"
    }
  }
}

常用脚本

pnpm dev
pnpm type-check
pnpm build
pnpm lint
pnpm format:check

发布

发布前确认：

• package.json 的 name、version、exports、运行时依赖正确。
• pnpm type-check 通过。
• pnpm build 生成 ESM、CJS 和 .d.ts 文件。
• 包只暴露稳定的公开入口。

pnpm publish:npm
pnpm publish:beta

相关文档

• TypeScript 文档
• tsup 文档
• esbuild 文档