tsup para TypeScript: guia completo com exemplos práticos

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

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

Recommendations