Scripts simultâneos no package.json

Marcelo Lopes da Silva — Thu, 02 Apr 2020 20:21:29 +0000

Objetivo

O objetivo desse post é ajudar quem está iniciando no mundo do desenvolvimento javascript e é sempre bom conhecer alguns truques que são usados.

Motivação

Durante o desenvolvimento de sistemas, sites e apps precisamos usar várias ferramentas no dia a dia. Muitas vezes pra colocar nosso ambiente de desenvolvimento 'de pé' é preciso executar vários scripts. Pode ser um fake-server, uma transpilação ou iniciar o emulador do Android etc.

Com esse cenário e como pra esse mundo javascript usamos bastante o arquivo package.json eu vou deixar uma dica que me ajudou e pode dar uma mãozinha pra quem estiver com a mesma dificuldade. Ou só quer parar de ficar abrindo vários Terminais e rodando comandos na sequência.

Inspiração

Esse é meu primeiro post e foi inspirado pelo pessoal da Rocketseat. Esse assunto específicamente não é algo que eu tenha visto por lá. Pro conteúdo que eu aprendi com eles eu ainda irei escrever muuuuiiito no futuro hahaha.. Mas, fica o registro de que a participação no curso e o incentivo do pessoal fez com que eu saísse das sombras e viesse escrever um pouco sobre javascript hahaha... Valeu Diego!!

Ferramentas

As ferramentas que vou utilizar aqui são o yarn, typescript e o node. Eu sempre uso o yarn e então, vou seguir o post com ele mas você pode usar o npm se preferir.

O package.json

Esse arquivo normalmente tem tudo sobre o projeto. Nome, versão dos pacotes, pacotes de dev, scripts. Tudo. Normalmente, quando iniciamos nossa aplicação node, typescript ou react, esse arquivo vai estar na pasta. Para este post vamos começar do zero apenas para fins didáticos.

Pra isso crie uma pasta qualquer, acesse e depois rode o comando. Como faço abaixo:

mkdir concurrent_script

cd ./concurrent_script

yarn init -y

ls

package.json

Desenvolvendo

Vamos criar um arquivo chamado index.ts para executarmos nossos scripts concorrentes.

Edite o arquivo e dentro dele apenas coloque um console.log como abaixo:

console.log("Hello Typescript");

Bom, normalmente então, pra utilizar esse script no node, vamos gerar o javascript através do comando tsc do typescript.

tsc index.ts

ls

index.js

Acima o que foi feito foi executar o typescript, o comando para listar conteúdo da pasta e o arquivo resultante index.js foi mostrado.

Agora para executar o que queremos, que é ver o código rodando no node, precisamos chamar o node, claro! ó Mds...

node index.js

Então o trabalho é, codar dentro usando typescript, salvar, fechar e rodar o typescript no arquivo ou arquivos e depois rodar o node para executar e ver o resultado.

Hummm!! Acho que não é muito bom isso...

Isso significa que toda vez então, vamos manter esse ciclo pra poder trabalhar. Muito ruim...

Solução

Pra resolver esse ciclo ai de transpilar, rodar node, transpilar, rodar node nós vamos utilizar o concurrently.

Vamos então instalar o pacote:

yarn add concurrently

Agora vamos editar o package.json. Abra o package.json no seu editor favorito ou no VSCode como eu:

code .

Logo após o "license" coloque uma vírgula e acrescente a área de scripts, como abaixo:


"scripts": {
   "start:build": "tsc index.ts",
   "start:run": "node index.js",
   "start": "concurrently yarn:start:*"
}

Pronto, agora salve o arquivo e volte para o terminal.

Dentro da pasta, basta digitar:

yarn start

E você verá que os dois scripts serão executados com apenas um comando.

Disclaimer

Temos o ts-node que faz isso pra gente mas mostrar que podemos criar alguns scripts para executar simultâneamente também é bem legal e útil. Lógico que eu recomendo utilizar o ts-node mas fica a dica do concurrently que você pode utilizar para qualquer coisa.

Se tiver alguma sugestão, correção ou apenas curiosidade sobre javascript e o seu ecosistema, daquilo que eu conheço, pode comentar ai que eu respondo!

Espero ter contribuido, um grande abraço!

DEV Community: Marcelo Lopes da Silva