Crie aplicações React 5x mais rápido com Bun
Lançado o beta de Bun, o javascript runtime que promete fazer Node e Deno comerem poeira.
É sério, você não vai acreditar na velocidade.
Bun é um novo JavaScript runtime com bundler nativo. Transpile, instale e rode projetos JavaScript e TypeScript — tudo diretamente no Bun.
Eu sei que o título desse artigo te chamou a atenção, para a velocidade da criação dos projetos, mas saiba que bun é rápido para todo o restante. Extremamente rápido para instalar pacotes npm, para rodar em modo de desenvolvimento, para buildar o seu projeto, e assim por diante... Vai por mim, você vai estranhar a velocidade :)
Quão mais rápido o Bun é?
Bem, fique com o print abaixo retirado do site oficial com uma pequena comparação:
Recomendo fortemente você tirar 20 minutos do seu dia, e contemplar essa maravilha.
Site oficial para aprender um pouco mais: https://bun.sh/
Lembrando que ainda encontra-se na versão beta.
Instale o bun
Primeiro certifique-se de que você já não o tenha instalado. Abra o terminal de sua máquina e digite:
bun -v
Se algo como "command not found" retornar, é porque ainda não o tem instalado. Então digite:
curl https://bun.sh/install | bash
Crie seu app React
Agora rode o seguinte comando para criar um app React.
bun create react [seu-app]
Isso irá criar um novo diretório com o nome escolhido para seu app. Para iniciar o app, rode então os seguintes comandos:
cd seu-app
bun dev
Configurando "bun build" para gerar o bundle de produção
Por padrão, o comando bun create react não instala o react-scripts, portanto, você deve instalar esse pacote manualmente com o seguinte comando:
bun a react-scripts
Então rode o seguinte comando para realizar o build de produção
bun react-scripts build
Após ter executado, o seu build de produção estará disponível dentro da pasta /build dentro do diretório do seu app.
Adicionando scripts ao seu package.json
Para facilitar nossa vida, vamos configurar alias para rodar os seguintes scripts. Adicione o seguinte código ao seu package.json
{
"scripts": {
"start": "bun dev",
"build": "react-scripts build"
}
}
Rodando o projeto
Podemos rodar o seguinte comando para rodar nosso app (configurado acima):
bun run start
ou continuar utilizando o
bun dev
Essa escolha eu deixo pra você ;)
Gerando build de produção
bun run build
Adicione pacotes npm ao seu app
Se você está acostumado com npm, deve conhecer o comando npm install [pacote].
Caso você já era adepto ao yarn, com certeza utilizava o yarn add [pacote]
Agora com o bun, você usará o seguinte comando, para adicionar novos pacotes ao seu projeto:
bun a [pacote]
Usando TypeScript no projeto
Por padrão bun cria aplicações React com javascript, porém nos podemos facilmente utilizar TypeScript alterando a extensão dos arquivos
.jsxpara.tsx