DEV Community

Cover image for Como criar um npx
Matheus Santos
Matheus Santos

Posted on

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"
}
Enter fullscreen mode Exit fullscreen mode

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!');
Enter fullscreen mode Exit fullscreen mode
  • É 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"
  }
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
     ...
   }
Enter fullscreen mode Exit fullscreen mode

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/

Top comments (3)

Collapse
 
israeljs profile image
Israel Jerônimo

Parabéns Matheus! Ficou muito bom!

Collapse
 
ggiacomini2012 profile image
Guilherme Giacomini Teixeira

Bom d+!

Collapse
 
ilanaragao profile image
Ilan Aragão

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