Como criar um npx

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.

// 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

  // 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

  // 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.

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

// 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. 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 localmente antes de modificar o package.json.

// 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.

   // 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
Github: @matheusg18
Linkedin: @matheusg18

Referências

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

Comments

[Israel Jerônimo]

Parabéns Matheus! Ficou muito bom!

[Guilherme Giacomini Teixeira]

Bom d+!

[Ilan Aragão]

Obrigado por compartilhar Matheus. Simples e direto ao ponto ... até salvei pra usar no futuro.