tsup para TypeScript: guia completo com exemplos práticos
1. O que é e para que serve
tsup é um bundler moderno, rápido e fácil de usar para TypeScript, construído sobre o esbuild. Sua principal função é empacotar sua biblioteca TypeScript em um ou vários arquivos, prontos para publicação no npm ou uso em outros projetos. Diferente de configurações complexas do Webpack ou Rollup, o tsup oferece uma configuração "pronta para uso" com zero configuração na maioria dos casos.
Por que usar o tsup? Ao desenvolver bibliotecas em TypeScript, você enfrenta vários desafios: compilar TypeScript para JavaScript, gerar declarações de tipos (.d.ts), combinar vários arquivos em um único bundle para facilitar o uso, e fazer isso para diferentes formatos de módulos (CommonJS, ESM). O tsup resolve todos esses problemas com um único comando. Ele processa automaticamente os imports, minifica o código (opcionalmente), gera source maps e suporta tree-shaking.
O tsup é ideal para: criar pacotes npm, bibliotecas de utilitários, componentes React/Vue, clientes de API e qualquer outro projeto que precise de uma compilação TypeScript rápida e simples. Graças ao uso do esbuild, o tsup é de 10 a 100 vezes mais rápido que os bundlers tradicionais, o que é especialmente perceptível em projetos grandes.
2. Instalação
O tsup é instalado via npm ou yarn como dependência de desenvolvimento:
# npm
npm install --save-dev tsup
# yarn
yarn add --dev tsup
# pnpm
pnpm add --save-dev tsup
Após a instalação, você pode executar o tsup via npx ou adicionar um script no package.json.
3. Início rápido — exemplo mínimo funcional
Vamos criar uma biblioteca simples e compilá-la com o tsup.
Passo 1: Crie o arquivo src/index.ts:
// src/index.ts
export function greet(name: string): string {
return `Olá, ${name}! Bem-vindo ao tsup.`;
}
export function add(a: number, b: number): number {
return a + b;
}
Passo 2: Crie o arquivo de configuração tsup.config.ts (ou use argumentos de linha de comando):
// tsup.config.ts
import { defineConfig } from 'tsup';
export default defineConfig({
entry: ['src/index.ts'], // ponto de entrada
format: ['cjs', 'esm'], // formatos de saída
dts: true, // gerar arquivos .d.ts
splitting: false, // não dividir em chunks
sourcemap: true, // gerar source maps
clean: true, // limpar pasta dist antes da compilação
});
Passo 3: Adicione o script no package.json:
{
"scripts": {
"build": "tsup"
}
}
Passo 4: Execute a compilação:
npm run build
O resultado aparecerá na pasta dist/:
dist/
├── index.js (CommonJS)
├── index.mjs (ESM)
├── index.d.ts (declarações de tipos)
├── index.d.mts (declarações para ESM)
└── index.js.map (source map)
4. Principais métodos/funções/classes
No tsup não existem classes no sentido tradicional. A API principal é a função defineConfig e o objeto de configuração. Vamos ver 8 opções de configuração essenciais.
4.1. entry
Sin
Também na biblioteca
Trabalhando com arquivos ZIP em PHP: ZipArchive e bibliotecas de compressão
Trabalhando com Kafka em Swift (iOS/macOS): bibliotecas, clientes e exemplos
Geração Swagger/OpenAPI em Kotlin: ferramentas e exemplos
prometheus/client_golang para Go: guia completo com exemplos práticos