Scripts simultâneos no package.json
Tags: javascript, typescript, node, react
Published: 2020-04-02 20:21:29

---
layout: post
title: Scripts simultâneos no package.json
published: true
description: Como você pode agilizar seu dia a dia configurando scripts dentro do package.json
tags: #javascript #typescript #node #react
---
# 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:

```script
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:

```javascript
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...

```javascript
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:

```javascript
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:

```javascript

"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!