[PT-BR] Usando esbuild com Typescript

Esses dias estava em live la na Twitch e um follower(arch1tekt_) estava me perguntando o que uso para fazer o "build" dos meus projetos.

Estudando sobre o tema achei diversos (grunt, webpack, native) mas o que mais me interessou foi o tal do esbuild.

Indicado por um colega de trabalho que leva a palavra "desempenho" muito a sério. Resolvi analisar, estudar e aplicar este construtor.

O que é um builder?

Antes de qualquer coisa podemos afirmar que um bundler é um pacote que tem como objetivo separar a construcao do projeto. Propondo sempre fazer algo de maneira mais completa, segura ou mais rapida.

Segundo a Wikipedia(que nao deve ser considerada como uma fonte 100% eficaz ok!)
Builder é um padrão de projeto de software criacional que permite a separação da construção de um objeto complexo da sua representação, de forma que o mesmo processo de construção possa criar diferentes representações.

Para ficar mais claro. Vamos fazer um teste aqui com o esbuild.

Criar um arquivo typescript basico

Para nosso teste vamos criar um programa super simples e chama-lo de "app.ts" e copie o codigo abaixo se quiser.

interface IUser {
   name: string,
   age: number
}
function getName(user: IUser}) {
    return user.name
}

const usuario = {
   name: "Joao das Couves",
   age: 51
}

console.log(getName(usuario))

Sobre o esbuild

De acordo com o site oficial, o esbuild é um empacotador JavaScript extremamente rápido ("An extremely fast JavaScript bundler"). E sou obrigado a concordar. Fiz testes com codigos pequenos, medios e grandes e o resultado foi surpreendente.

Instalando o esbuild

Vamos instalar o esbuild de maneira Global.

npm i -g esbuild

Testando esbuild

Ao rodar esbuild no terminal voce deve receber essa infomacao.

PS C:\Users\Em1dio> esbuild

Usage:
  esbuild [options] [entry points]

Documentation:
  https://esbuild.github.io/

Repository:
  https://github.com/evanw/esbuild
...

Configurar o esbuild

Aqui vai a melhor resposta de todas! Depende!
Depende do que? Do ambiente que voce esta querendo construir.

Indico para ambientes de desenvolvimento e homologacao
cria um arquivo chamado "esbuild.js" e coloque esse campo.

const esbuild = require('esbuild');

esbuild.build({
    entryPoints: ['app.ts'],
    outfile: 'out/app.js',
    bundle: true,
    minify: true,
    sourcemap: true,
    platform: 'node',
    target: 'node14'
}).catch(() => process.exit(1));

Caso queira saber o que cada informacao dentro desse build significa, indico muito ler a documentação.

Executar a build

node esbuild.js

Mas para facilitar voce pode colocar um script no seu "package.json"

{
    "name": "enterpryze-middleware",
    "description": "Enterpryze Middleware/API",
    "version": "1.21.1213.1",
    "scripts": {
        "build":"node esbuild"
    }
}

Ao coloca no package.json podemos apenas executar no bash

npm run build

Executar seu codigo

Com tudo pronto vamos executar e ver isso ai funcionando!

node esbuild.js
node out/app.js