TypeScript Package Template

The TypeScript Package template provides a lightweight package development setup for pure TypeScript libraries. Use it for infrastructure packages such as HTTP clients, storage adapters, utilities, SDKs, and other framework-agnostic modules. For Vue SFC components, use the Component template instead.

Technical Stack

• TypeScript - Type-safe package development (docs)
• tsup - Bundles ESM, CJS, source maps, and type declarations (docs)
• ESBuild - Fast transform pipeline used by tsup (docs)
• pnpm workspace - Runs as an app template inside the monorepo

Quick Start

1. Create Project

vup init my-project
cd my-project

vup add my-package
# Select Package template

2. Install Dependencies

pnpm install

3. Start Development

cd apps/my-package
pnpm dev

Project Structure

apps/my-package/
├── src/
│   ├── http/
│   │   └── index.ts        # Example infrastructure module
│   └── index.ts            # Root barrel export
├── tsup.config.ts          # Build entries and output config
├── tsconfig.json           # TypeScript config
├── package.json            # Package metadata and exports
└── README.md

Module Conventions

• Put each reusable capability in its own directory, such as src/http/, src/socket/, or src/storage/.
• Export public types and functions from each module entry.
• Keep src/index.ts as the root aggregation entry.
• When adding a subpath import, update both tsup.config.ts entries and package.json exports.

Example imports:

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

Build Outputs

The template builds into .output/:

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

package.json maps each public entry explicitly:

{
  "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"
    }
  }
}

Scripts

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

Publishing

Before publishing, check:

• package.json has the correct name, version, exports, and runtime dependencies.
• pnpm type-check passes.
• pnpm build generates ESM, CJS, and .d.ts files.
• The package only exposes stable public entries.

pnpm publish:npm
pnpm publish:beta

Related Documentation

• TypeScript Documentation
• tsup Documentation
• esbuild Documentation