Como criar um npx
Tags: javascript, node, npm
Published: 2022-03-20 18:01:49

Um npx (pacote executável do npm) pode ser muito útil para automatizar tarefas repetitivas ou mesmo para soltar a criatividade e criar algo novo. Neste artigo vou mostrar como é simples criar um.

## O básico

Primeiro de tudo precisamos criar um repositório npm para o nosso pacote, para isso rode o comando `npm init -y` numa pasta vazia. Agora temos o nosso `package.json`.

Neste ponto é interessante mudar o nome do pacote, a chave `name` do `package.json`. Vamos mudar para `my-npx`.

```js
// package.json
{
  "name": "my-npx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

O próximo passo é criar o nosso script. Vamos criar o arquivo `index.js` e dar um simples `console.log`.

**Observações importantes**:

- É necessário colocar `#!/usr/bin/env node` logo na primeira linha do nosso `index.js`

  ```js
  // index.js
  #!/usr/bin/env node

  console.log('Meu primeiro npx!');
  ```

- É necessário, também, criar a chave `bin` no `package.json` e passar para ela o caminho do nosso `index.js`

  ```js
  // package.json
  {
    "name": "my-npx",
    "version": "1.0.0",
    "description": "",
    "bin": "index.js",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
  }
  ```

Tudo pronto, agora vamos testar. Rode o comando `npm i -g` para instalar globalmente o nosso pacote npm. Com ele instalado basta rodar `npx my-npx` e você verá a mágica acontecer!

## Melhorando o script

Para dar uma melhorada no script vamos fazer um fetch para uma API de fatos aleatórios, [https://uselessfacts.jsph.pl](https://uselessfacts.jsph.pl).

Vamos precisar do node-fetch, `npm i node-fetch@2`.

```js
// index.js
#!/usr/bin/env node

const fetch = require('node-fetch');

const getRandomFact = async () => {
  const ENDPOINT = 'https://uselessfacts.jsph.pl/random.json?language=en';
  const randomFact = await fetch(ENDPOINT).then((response) => response.json());

  return randomFact.text;
};

getRandomFact().then((randomFact) => console.log(randomFact));
```

Agora é só rodar `npx my-npx` para testar as mudanças no nosso npx.

---

## Publicando o pacote para o npm

Digamos que você fez um npx muito incrível e quer compartilhar para o mundo, como fazer isso?

A primeira coisa a se fazer é [criar uma conta no site do npm](https://www.npmjs.com/signup). Feito isso rode o comando `npm adduser` para fazer o login com a sua conta do npm que foi criada.

Agora vamos fazer algumas modificações no `package.json` antes de publicar.

**Para evitar problemas [desinstale o pacote](#observações) localmente antes de modificar o `package.json`.**

```js
// package.json
{
  "name": "{seu-usuário}-my-npx", // substitua pelo seu nome de usuário do npm, esse formato garante que você crie um nome único
  "version": "1.0.0",
  "description": "Meu primeiro npx", // adicione uma pequena descrição
  "bin": "index.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "{Nome} {Sobrenome}", // substitua pelo seu nome
  "license": "ISC",
  "dependencies": {
    "node-fetch": "^2.6.7"
  }
}
```

Próximo passo é dar um `npm publish` na pasta onde está o `package.json` e pronto, pacote publicado!

Rode `npx matheusg18-my-npx` aí para ver o que acontece.

---

## Observações

- Para rodar `npm i -g` é necessário que o terminal esteja aberto na pasta onde está o `package.json`;
- Para listar os pacotes npm instalados globalmente: `npm list -g --depth 0`;
- Para desinstalar o npx que foi criado:
  - rodar o comando `npm remove -g` na pasta onde está o `package.json`, ou
  - rodar o comando `npm remove -g my-npx`.
- Quando for atualizar o pacote, antes de executar `npm publish` de novo, mude a versão do seu pacote no `package.json`.
  ```js
   // package.json
   {
     "name": "{seu-usuário}-my-npx",
     "version": "1.1.0",  // exemplo
     ...
   }
  ```

---

## Considerações finais

Espero que tenham gostado do artigo. Qualquer dúvida é só perguntar aqui em baixo e eu tentarei ao máximo responder!

Exemplo de um npx que eu criei: [npx trybe-prj](https://www.npmjs.com/package/trybe-prj)
Github: [@matheusg18](https://github.com/matheusg18)
Linkedin: [@matheusg18](https://www.linkedin.com/in/matheusg18/)

#### Referências

https://docs.npmjs.com/
https://pakstech.com/blog/npx-script/