{"id":2674,"date":"2020-03-10T17:05:00","date_gmt":"2020-03-10T20:05:00","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=2674"},"modified":"2025-09-02T13:49:17","modified_gmt":"2025-09-02T16:49:17","slug":"npm-para-iniciantes","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2020\/03\/10\/npm-para-iniciantes","title":{"rendered":"NPM para iniciantes"},"content":{"rendered":"\n

Ao iniciar um novo projeto para\u00a0<\/span>Web<\/span>, \u00e9 comum esbarrar em problemas complicados, mas com solu\u00e7\u00f5es proporcionadas por\u00a0<\/span>frameworks<\/span>\u00a0ou pacotes independentes facilmente encontrados na primeira pesquisa realizada na internet. Conforme os projetos crescem em dimens\u00e3o e o n\u00famero de m\u00f3dulos aumenta, a organiza\u00e7\u00e3o desses pacotes pode se tornar um verdadeiro desafio. O que fazer quando isso acontece?<\/span><\/p>\n

Desde a cria\u00e7\u00e3o do\u00a0<\/span>Node.js<\/a><\/span>, o processo de desenvolvimento de software para\u00a0<\/span>Web<\/span>\u00a0passou por uma transforma\u00e7\u00e3o significativa, principalmente na modulariza\u00e7\u00e3o e distribui\u00e7\u00e3o das depend\u00eancias utilizadas nos projetos. Com o crescimento do\u00a0<\/span>Node<\/span>, um novo gerenciador de pacotes foi criado, chamado\u00a0<\/span>Node Package Manager<\/span>. \u00a0Com ele, o manejo de depend\u00eancias ,\u00a0<\/span>antes feito manualmente e pass\u00edvel de muitos erros, passou a ser automatizado, facilitando o trabalho.<\/span><\/p>\n

Nesse tutorial, voc\u00ea ir\u00e1 aprender a utilizar o\u00a0<\/span>Node Package Manager<\/span>\u00a0(<\/span>npm<\/span>), um gerenciador de pacotes para a linguagem de programa\u00e7\u00e3o\u00a0<\/span>JavaScript<\/span>. Iremos aprender o b\u00e1sico sobre o funcionamento da ferramenta, entendendo seus principais componentes e como a ferramenta \u00e9 mais utilizada. Al\u00e9m disso, tamb\u00e9m \u00a0iremos nos aventurar publicando o nosso pr\u00f3prio pacote.<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n\"\"\n

Logo oficial do Node Package Manager (npm)<\/span><\/pre>\n
\u00a0<\/p>\n
O que \u00e9, de onde vem e o que ele faz?<\/span><\/strong><\/p>\n
Sendo disponibilizado oficialmente junto ao\u00a0<\/span>Node.js<\/span>, o npm \u00e9 um gerenciador de pacotes criado para a linguagem de programa\u00e7\u00e3o\u00a0<\/span>JavaScript<\/span>. Foi em janeiro de 2010 que Isaac Z. Schlueter, buscando solucionar a maneira extremamente desorganizada de que os m\u00f3dulos eram inclu\u00eddos nos projetos do qual j\u00e1 tinha trabalhado, lan\u00e7ou a vers\u00e3o inicial da ferramenta.<\/span><\/p>\n
Essa ferramenta<\/span>\u00a0permite que os desenvolvedores que trabalham com a\u00a0<\/span>Web<\/span>\u00a0possam publicar facilmente seus projetos, e que outros desenvolvedores possam ter acesso \u00e0 esses c\u00f3digos de forma r\u00e1pid<\/span>a<\/span>\u00a0e gratuita. N\u00e3o se limitando a isso, com o passar do tempo, v\u00e1rias outras funcionalidades tamb\u00e9m s\u00e3o oferecidas pela npm, como utilizar pacotes sem realizar o seu\u00a0<\/span>download<\/span>\u00a0e at\u00e9 mesmo compartilhar os pacotes com organiza\u00e7\u00f5es ou grupos espec\u00edficos.<\/span><\/p>\n
Pode-se dividir o npm entre tr\u00eas componentes:\u00a0<\/span>registro<\/span>,\u00a0<\/span>website<\/span>\u00a0e\u00a0<\/span>command-line interface<\/span>\u00a0(CLI)<\/span>, ou em portugu\u00eas, interface de linha de comando.<\/span><\/p>\n
    \n
  1. Registro<\/span><\/strong>: \u00e9 um grande banco de dados p\u00fablicos de software JavaScript, onde s\u00e3o mantidos os pacotes publicados atrav\u00e9s do npm;<\/span><\/li>\n
  2. Website<\/span><\/strong>: possibilita a navega\u00e7\u00e3o pelo acervo do<\/span>\u00a0registro<\/span>, permitindo encontrar novos pacotes, configurar seu perfil pessoal do npm, criar organiza\u00e7\u00f5es (possibilitando a publica\u00e7\u00e3o de pacotes privados e p\u00fablicos), e outras fun\u00e7\u00f5es;<\/span><\/li>\n
  3. Command-line<\/span>\u00a0interface<\/span><\/strong>: \u00e9 a interface de linha de comando a qual o desenvolvedor ir\u00e1 utilizar os comandos dispon\u00edveis pelo npm, podendo realizar o download, cria\u00e7\u00e3o, remo\u00e7\u00e3o e at\u00e9 mesmo atualiza\u00e7\u00e3o de pacotes.<\/span><\/li>\n<\/ol>\n
    Mas afinal, o que s\u00e3o exatamente esses pacotes?<\/span><\/strong><\/p>\n
    Esses pacotes, tamb\u00e9m chamados de m\u00f3dulos, s\u00e3o geralmente solu\u00e7\u00f5es de problemas particulares, ou seja, projetos pequenos que resolvem desafios espec\u00edficos, como um debugger para\u00a0<\/span>JavaScript<\/span>. A ideia \u00e9 que cada pacote solucione um problema independente e de forma eficiente, e que assim, o desenvolvedor possa criar solu\u00e7\u00f5es customizadas atrav\u00e9s da combina\u00e7\u00e3o desses pequenos m\u00f3dulos. O que caracteriza cada um desses projetos como um pacote npm \u00e9 seu arquivo\u00a0<\/span>package.json<\/span>.<\/span><\/p>\n
    Configurando o ambiente<\/span><\/strong><\/p>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>Para come\u00e7armos a dar os primeiros passos com o npm, precisamos realizar a instala\u00e7\u00e3o da\u00a0<\/span>CLI<\/span>\u00a0em nossos computadores. Sendo assim, voc\u00ea precisa basicamente\u00a0<\/span>instalar o\u00a0<\/a><\/span>Node.js<\/a><\/span>.<\/span><\/p>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Como o npm \u00e9 distribu\u00eddo oficialmente com o\u00a0<\/span>Node<\/span>, ao instal\u00e1-lo, a\u00a0<\/span>CLI<\/span>\u00a0do gerenciador de pacotes j\u00e1 estar\u00e1 pronta para o nosso uso. Caso tenha d\u00favidas em qual vers\u00e3o instalar, basta seguir as instru\u00e7\u00f5es recomendadas no website. Para testar sua instala\u00e7\u00e3o, voc\u00ea pode acessar a\u00a0<\/span>CLI\u00a0<\/span>e utilizar o seguinte comando:<\/span><\/p>\n\n\n\n
    \n
    \u00a0 \u00a0\u00a0<\/span>npm --version<\/span><\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Ele ir\u00e1 imprimir a vers\u00e3o instalada em seu computador, confirmando que o programa est\u00e1 funcionando. Vamos criar o nosso pr\u00f3prio pacote?<\/span><\/p>\n
    Criando seu primeiro pacote<\/span><\/strong><\/p>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>Neste guia, iremos criar um pacote exemplo com o intuito de aprender a manipular pacotes com o npm. Ele ser\u00e1 uma aplica\u00e7\u00e3o\u00a0<\/span>Node.js<\/span>\u00a0simples, tendo a fun\u00e7\u00e3o de somar<\/span>\u00a0dois n\u00fameros e imprimir sua soma.<\/span>\u00a0<\/span>Inicialmente, precisamos navegar pela\u00a0<\/span>CLI<\/span>\u00a0at\u00e9 a pasta onde nosso projeto ser\u00e1 criado. Caso n\u00e3o tenha familiaridade com o uso de terminais\u00a0<\/span>Unix-based<\/span>\u00a0e semelhantes,\u00a0<\/span>esse material<\/a><\/span>\u00a0pode te ajudar. Uma vez na pasta de nosso projeto, crie um arquivo chamado\u00a0<\/span>index.js<\/span>\u00a0e salve o seguinte programa nele:<\/span><\/p>\n\n\n\n
    \n
    const<\/span>\u00a0<\/span>chalk<\/span>\u00a0=\u00a0<\/span>require<\/span>(<\/span>'chalk'<\/span>);\u00a0<\/span>\/\/ M\u00f3dulo que ir\u00e1 auxiliar na impress\u00e3o de strings<\/span><\/code><\/p>\n
    const<\/span>\u00a0<\/span>n1<\/span>\u00a0= +<\/span>process<\/span>.<\/span>argv<\/span>[<\/span>2<\/span>];\u00a0<\/span>\/\/ Recebe o primeiro par\u00e2metro do terminal<\/span><\/code><\/p>\n
    const<\/span>\u00a0<\/span>n2<\/span>\u00a0= +<\/span>process<\/span>.<\/span>argv<\/span>[<\/span>3<\/span>];\u00a0<\/span>\/\/ Recebe o segundo par\u00e2metro do terminal<\/span><\/code><\/p>\n
    try<\/span>\u00a0{<\/span><\/code><\/p>\n
    \u00a0 \u00a0<\/span>if<\/span>\u00a0(!<\/span>n1<\/span>\u00a0|| !<\/span>n2<\/span>)\u00a0<\/span>\/\/ Checa se algum dos valores \u00e9 falso, null, undefined...<\/span><\/code><\/p>\n
    \u00a0 \u00a0 \u00a0 \u00a0<\/span>throw<\/span>\u00a0<\/span>'Par\u00e2metros inv\u00e1lidos!'<\/span>;<\/span><\/code><\/p>\n
    \u00a0 \u00a0<\/span>console<\/span>.<\/span>log<\/span>(<\/span>chalk<\/span>.<\/span>white<\/span>.<\/span>bgBlue<\/span>(<\/span>'Soma: '<\/span>\u00a0+ (<\/span>n1<\/span>\u00a0+\u00a0<\/span>n2<\/span>)));\u00a0<\/span>\/\/ Imprime a soma dos n\u00fameros<\/span><\/code><\/p>\n
    }\u00a0<\/span>catch<\/span>\u00a0(<\/span>e<\/span>) {<\/span><\/code><\/p>\n
    \u00a0 \u00a0<\/span>console<\/span>.<\/span>log<\/span>(<\/span>chalk<\/span>.<\/span>bold<\/span>.<\/span>red<\/span>(<\/span>e<\/span>));\u00a0<\/span>\/\/ Imprime o erro, caso algum dos valores seja inv\u00e1lido<\/span><\/code><\/p>\n
    }<\/span><\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    N\u00e3o se preocupe em entender o c\u00f3digo do programa, ele \u00e9 s\u00f3 um pacote exemplo que estamos criando, embora funcione. \u00a0Feito isso, devemos iniciar a configura\u00e7\u00e3o de nosso pacote npm da seguinte forma:<\/span><\/p>\n\n\n\n
    \n
    \u00a0 \u00a0\u00a0<\/span>npm init<\/span><\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>Esse comando nos auxiliar\u00e1 na configura\u00e7\u00e3o b\u00e1sica de nosso pacote, criando o nosso arquivo\u00a0<\/span>package.json<\/span>\u00a0e o preenchendo com uma s\u00e9rie de informa\u00e7\u00f5es que iremos fornecer. Preencha a descri\u00e7\u00e3o, nome e autor como quiser, mas n\u00e3o preencha nada nos outros par\u00e2metros. Ao fim da execu\u00e7\u00e3o, o nosso arquivo deve estar semelhante a isso:<\/span><\/p>\n\n\n\n
    \n
    {<\/span><\/code><\/p>\n
    \u00a0<\/span>\"name\"<\/span>:\u00a0<\/span>\"sum2\"<\/span>,<\/span><\/code><\/p>\n
    \u00a0<\/span>\"version\"<\/span>:\u00a0<\/span>\"1.0.0\"<\/span>,<\/span><\/code><\/p>\n
    \u00a0<\/span>\"description\"<\/span>:\u00a0<\/span>\"Somador de dois n\u00fameros\"<\/span>,<\/span><\/code><\/p>\n
    \u00a0<\/span>\"main\"<\/span>:\u00a0<\/span>\"index.js\"<\/span>,<\/span><\/code><\/p>\n
    \u00a0<\/span>\"scripts\"<\/span>: {<\/span><\/code><\/p>\n
    \u00a0 \u00a0<\/span>\"test\"<\/span>:\u00a0<\/span>\"echo\u00a0<\/span>\\\"<\/span>Error: no test specified<\/span>\\\"<\/span>\u00a0&& exit 1\"<\/span><\/code><\/p>\n
    \u00a0},<\/span><\/code><\/p>\n
    \u00a0<\/span>\"author\"<\/span>:\u00a0<\/span>\"Hierro Duarte\"<\/span>,<\/span><\/code><\/p>\n
    \u00a0<\/span>\"license\"<\/span>:\u00a0<\/span>\"ISC\"<\/span><\/code><\/p>\n
    }<\/span><\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>A maior parte dos campos \u00e9 auto descritivo, como\u00a0<\/span>“name”<\/span>\u00a0e\u00a0<\/span>“description”<\/span>, mas alguns podem gerar certa d\u00favida, como\u00a0<\/span>“scripts”<\/span>. De qualquer forma, eles ser\u00e3o explicados conforme necess\u00e1rio. Para aprender mais sobre o\u00a0<\/span>package.json<\/span>, a\u00a0<\/span>documenta\u00e7\u00e3o oficial<\/a><\/span>\u00a0\u00e9 um bom in\u00edcio.<\/span><\/p>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Na primeira linha de nosso programa, declaramos que utilizaremos \u00a0o m\u00f3dulo\u00a0<\/span>Chalk<\/a><\/span>, que auxilia na impress\u00e3o de strings na\u00a0<\/span>CLI<\/span>, fornecendo v\u00e1rias op\u00e7\u00f5es de estiliza\u00e7\u00e3o. Para utiliz\u00e1-lo, \u00a0instalaremos essa depend\u00eancia em nosso projeto com o seguinte comando:<\/span><\/p>\n\n\n\n
    \n
    \u00a0 \u00a0<\/span>\u00a0<\/span>npm install<\/span>\u00a0chalk@2.0.0 \u00a0<\/span>--save<\/span><\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Esse comando realiza a instala\u00e7\u00e3o do pacote\u00a0<\/span>Chalk<\/span>\u00a0na vers\u00e3o 2.0.0, buscando-o diretamente no\u00a0<\/span>registro<\/span>, citado anteriormente. Para que essa depend\u00eancia seja diretamente inserida em nosso\u00a0<\/span>package.json<\/span>, utilizamos a flag\u00a0<\/span>–save<\/span>. Sendo assim, quando compartilharmos nosso projeto, bastar\u00e1 que os usu\u00e1rios de nosso m\u00f3dulo utilizem o comando\u00a0<\/span>npm install<\/span>. Ao execut\u00e1-lo, as depend\u00eancias ser\u00e3o instaladas na pasta\u00a0<\/span>node_modules<\/span>. \u00c9 nela em que todas nossas depend\u00eancias s\u00e3o instaladas pelo npm.<\/span><\/p>\n
    E se as coisas estiverem desatualizadas?<\/span><\/strong><\/p>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Uma das fun\u00e7\u00f5es que a\u00a0<\/span>CLI<\/span>\u00a0nos proporciona \u00e9 a de checar quais depend\u00eancias est\u00e3o desatualizadas. Ao realizarmos a instala\u00e7\u00e3o do\u00a0<\/span>Chalk\u00a0<\/span>anteriormente, acabamos por optar por uma vers\u00e3o um pouco mais desatualizada. Podemos conferir isso executando:<\/span><\/p>\n\n\n\n
    \n
    \u00a0 \u00a0\u00a0<\/span>npm outdated<\/span><\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0A sa\u00edda desse comando ir\u00e1 nos mostrar todos os nossos pacotes que est\u00e3o desatualizados, mostrando a vers\u00e3o de cada um que est\u00e1 instalado, junto com sua vers\u00e3o recomendada e tamb\u00e9m a vers\u00e3o mais atualizada. Podemos ent\u00e3o atualizar o pacote\u00a0<\/span>Chalk<\/span>\u00a0com:<\/span><\/p>\n\n\n\n
    \n
    \u00a0 \u00a0\u00a0<\/span>npm update<\/span>\u00a0chalk\u00a0<\/span>--save<\/span><\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Lembrando que o pacote \u00e9 atualizado para a \u00faltima vers\u00e3o recomendada, ou seja, que potencialmente n\u00e3o ir\u00e1 causar problemas na execu\u00e7\u00e3o de nossos programas, j\u00e1 que vers\u00f5es mais novas de pacotes podem n\u00e3o ser est\u00e1veis. Tamb\u00e9m utilizamos a flag\u00a0<\/span>–save<\/span>\u00a0para que nossa depend\u00eancia seja atualizada da forma correta dentro do\u00a0<\/span>package.json<\/span>. Caso quis\u00e9ssemos excluir esse pacote de vez de nosso projeto, poder\u00edamos utilizar o comando<\/span>\u00a0<\/span>npm delete\u00a0<\/span><nome_do_pacote><\/span>.<\/p>\n
    Dando asas ao nosso pacote<\/span><\/strong><\/p>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Com nosso pacote j\u00e1 pronto, precisamos public\u00e1-lo! Para isso, a primeira coisa que devemos fazer \u00e9 criar uma conta no\u00a0<\/span>website<\/a><\/span>\u00a0do npm (n\u00e3o esque\u00e7a de verificar seu e-mail para que possa publicar seus pacotes!). Com nossa conta criada, basta executarmos o seguinte comando:<\/span><\/p>\n\n\n\n
    \n
    \u00a0 \u00a0\u00a0<\/span>npm login<\/span><\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Ele ir\u00e1 nos pedir nossas credenciais e, preenchendo tudo corretamente, s\u00f3 precisaremos de mais um comando para que nosso projeto seja publicado. Execute:<\/span><\/p>\n\n\n\n
    \n
    \u00a0 \u00a0\u00a0<\/span>npm publish<\/span><\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Ap\u00f3s o comando finalizar sua execu\u00e7\u00e3o, tudo estar\u00e1 pronto! O pacote j\u00e1 estar\u00e1 dispon\u00edvel dentro do\u00a0<\/span>registro<\/span>\u00a0npm, podendo ser consultado diretamente no site. Com isso, voc\u00ea j\u00e1 poder\u00e1 criar seus pr\u00f3prios pacotes, manipul\u00e1-los e at\u00e9 mesmo public\u00e1-los. Para mais tutoriais como esse, continue acessando nosso site, pois os PET Reda\u00e7\u00f5es n\u00e3o ir\u00e3o parar!<\/span><\/p>\n
    Para acessar o pacote desenvolvido neste artigo,\u00a0<\/span>clique aqui<\/a><\/span>.<\/span><\/p>\n
    \u00a0<\/p>\n\"\"\n
    \u00a0<\/p>\n
    Aprendendo ainda mais!<\/span><\/p>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0O npm ainda tem muitas outras fun\u00e7\u00f5es que nem foram exploradas neste artigo, ent\u00e3o por onde voc\u00ea pode continuar?<\/span><\/p>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0O arquivo<\/span>\u00a0<\/span>package.json<\/span>\u00a0\u00e9 como o arquivo de configura\u00e7\u00e3o do seu pacote. Nele estar\u00e3o listadas v\u00e1rias caracter\u00edsticas fundamentais do m\u00f3dulo, detalhando tudo que ele precisa para funcionar junto do npm, como por exemplo: nome, vers\u00e3o, lista de depend\u00eancias e outras informa\u00e7\u00f5es. As depend\u00eancias s\u00e3o as informa\u00e7\u00f5es mais importantes deste arquivo, pois caso o seu pacote seja publicado e ele dependa de algum outro pacote, como\u00a0<\/span>Lodash<\/a><\/span>, isso precisa estar descrito na lista de depend\u00eancias. Caso contr\u00e1rio, as coisas n\u00e3o ir\u00e3o funcionar como deveriam.<\/span><\/p>\n