NPM para iniciantes

Ao iniciar um novo projeto para Web, é comum esbarrar em problemas complicados, mas com soluções proporcionadas por frameworks ou pacotes independentes facilmente encontrados na primeira pesquisa realizada na internet. Conforme os projetos crescem em dimensão e o número de módulos aumenta, a organização desses pacotes pode se tornar um verdadeiro desafio. O que fazer quando isso acontece?

Desde a criação do Node.js, o processo de desenvolvimento de software para Web passou por uma transformação significativa, principalmente na modularização e distribuição das dependências utilizadas nos projetos. Com o crescimento do Node, um novo gerenciador de pacotes foi criado, chamado Node Package Manager. Com ele, o manejo de dependências , antes feito manualmente e passível de muitos erros, passou a ser automatizado, facilitando o trabalho.

Nesse tutorial, você irá aprender a utilizar o Node Package Manager (npm), um gerenciador de pacotes para a linguagem de programação JavaScript. Iremos aprender o básico sobre o funcionamento da ferramenta, entendendo seus principais componentes e como a ferramenta é mais utilizada. Além disso, também iremos nos aventurar publicando o nosso próprio pacote.

Logo oficial do Node Package Manager (npm)

O que é, de onde vem e o que ele faz?

Sendo disponibilizado oficialmente junto ao Node.js, o npm é um gerenciador de pacotes criado para a linguagem de programação JavaScript. Foi em janeiro de 2010 que Isaac Z. Schlueter, buscando solucionar a maneira extremamente desorganizada de que os módulos eram incluídos nos projetos do qual já tinha trabalhado, lançou a versão inicial da ferramenta.

Essa ferramenta permite que os desenvolvedores que trabalham com a Web possam publicar facilmente seus projetos, e que outros desenvolvedores possam ter acesso à esses códigos de forma rápida e gratuita. Não se limitando a isso, com o passar do tempo, várias outras funcionalidades também são oferecidas pela npm, como utilizar pacotes sem realizar o seu download e até mesmo compartilhar os pacotes com organizações ou grupos específicos.

Pode-se dividir o npm entre três componentes: registro, website e command-line interface (CLI), ou em português, interface de linha de comando.

Registro: é um grande banco de dados públicos de software JavaScript, onde são mantidos os pacotes publicados através do npm;
Website: possibilita a navegação pelo acervo do registro, permitindo encontrar novos pacotes, configurar seu perfil pessoal do npm, criar organizações (possibilitando a publicação de pacotes privados e públicos), e outras funções;
Command-line interface: é a interface de linha de comando a qual o desenvolvedor irá utilizar os comandos disponíveis pelo npm, podendo realizar o download, criação, remoção e até mesmo atualização de pacotes.

Mas afinal, o que são exatamente esses pacotes?

Esses pacotes, também chamados de módulos, são geralmente soluções de problemas particulares, ou seja, projetos pequenos que resolvem desafios específicos, como um debugger para JavaScript. A ideia é que cada pacote solucione um problema independente e de forma eficiente, e que assim, o desenvolvedor possa criar soluções customizadas através da combinação desses pequenos módulos. O que caracteriza cada um desses projetos como um pacote npm é seu arquivo package.json.

O arquivo package.json é como o arquivo de configuração do seu pacote. Nele estarão listadas várias características fundamentais do módulo, detalhando tudo que ele precisa para funcionar junto do npm, como por exemplo: nome, versão, lista de dependências e outras informações. As dependências são as informações mais importantes deste arquivo, pois caso o seu pacote seja publicado e ele dependa de algum outro pacote, como Lodash, isso precisa estar descrito na lista de dependências. Caso contrário, as coisas não irão funcionar como deveriam.

Configurando o ambiente

Para começarmos a dar os primeiros passos com o npm, precisamos realizar a instalação da CLI em nossos computadores. Sendo assim, você precisa basicamente instalar o Node.js.

Como o npm é distribuído oficialmente com o Node, ao instalá-lo, a CLI do gerenciador de pacotes já estará pronta para o nosso uso. Caso tenha dúvidas em qual versão instalar, basta seguir as instruções recomendadas no website. Para testar sua instalação, você pode acessar a CLI e utilizar o seguinte comando:

npm --version

Ele irá imprimir a versão instalada em seu computador, confirmando que o programa está funcionando. Vamos criar o nosso próprio pacote?

Criando seu primeiro pacote

Neste guia, iremos criar um pacote exemplo com o intuito de aprender a manipular pacotes com o npm. Ele será uma aplicação Node.js simples, tendo a função de somar dois números e imprimir sua soma. Inicialmente, precisamos navegar pela CLI até a pasta onde nosso projeto será criado. Caso não tenha familiaridade com o uso de terminais Unix-based e semelhantes, esse material pode te ajudar. Uma vez na pasta de nosso projeto, crie um arquivo chamado index.js e salve o seguinte programa nele:

const chalk = require('chalk'); // Módulo que irá auxiliar na impressão de strings

const n1 = +process.argv[2]; // Recebe o primeiro parâmetro do terminal

const n2 = +process.argv[3]; // Recebe o segundo parâmetro do terminal

try {

if (!n1 || !n2) // Checa se algum dos valores é falso, null, undefined...

throw 'Parâmetros inválidos!';

console.log(chalk.white.bgBlue('Soma: ' + (n1 + n2))); // Imprime a soma dos números

} catch (e) {

console.log(chalk.bold.red(e)); // Imprime o erro, caso algum dos valores seja inválido

}

Não se preocupe em entender o código do programa, ele é só um pacote exemplo que estamos criando, embora funcione. Feito isso, devemos iniciar a configuração de nosso pacote npm da seguinte forma:

npm init

Esse comando nos auxiliará na configuração básica de nosso pacote, criando o nosso arquivo package.json e o preenchendo com uma série de informações que iremos fornecer. Preencha a descrição, nome e autor como quiser, mas não preencha nada nos outros parâmetros. Ao fim da execução, o nosso arquivo deve estar semelhante a isso:

{

"name": "sum2",

"version": "1.0.0",

"description": "Somador de dois números",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "Hierro Duarte",

"license": "ISC"

}

A maior parte dos campos é auto descritivo, como “name” e “description”, mas alguns podem gerar certa dúvida, como “scripts”. De qualquer forma, eles serão explicados conforme necessário. Para aprender mais sobre o package.json, a documentação oficial é um bom início.

Na primeira linha de nosso programa, declaramos que utilizaremos o módulo Chalk, que auxilia na impressão de strings na CLI, fornecendo várias opções de estilização. Para utilizá-lo, instalaremos essa dependência em nosso projeto com o seguinte comando:

npm install chalk@2.0.0 --save

Esse comando realiza a instalação do pacote Chalk na versão 2.0.0, buscando-o diretamente no registro, citado anteriormente. Para que essa dependência seja diretamente inserida em nosso package.json, utilizamos a flag –save. Sendo assim, quando compartilharmos nosso projeto, bastará que os usuários de nosso módulo utilizem o comando npm install. Ao executá-lo, as dependências serão instaladas na pasta node_modules. É nela em que todas nossas dependências são instaladas pelo npm.

E se as coisas estiverem desatualizadas?

Uma das funções que a CLI nos proporciona é a de checar quais dependências estão desatualizadas. Ao realizarmos a instalação do Chalk anteriormente, acabamos por optar por uma versão um pouco mais desatualizada. Podemos conferir isso executando:

npm outdated

A saída desse comando irá nos mostrar todos os nossos pacotes que estão desatualizados, mostrando a versão de cada um que está instalado, junto com sua versão recomendada e também a versão mais atualizada. Podemos então atualizar o pacote Chalk com:

npm update chalk --save

Lembrando que o pacote é atualizado para a última versão recomendada, ou seja, que potencialmente não irá causar problemas na execução de nossos programas, já que versões mais novas de pacotes podem não ser estáveis. Também utilizamos a flag –save para que nossa dependência seja atualizada da forma correta dentro do package.json. Caso quiséssemos excluir esse pacote de vez de nosso projeto, poderíamos utilizar o comando npm delete <nome_do_pacote>.

Dando asas ao nosso pacote

Com nosso pacote já pronto, precisamos publicá-lo! Para isso, a primeira coisa que devemos fazer é criar uma conta no website do npm (não esqueça de verificar seu e-mail para que possa publicar seus pacotes!). Com nossa conta criada, basta executarmos o seguinte comando:

npm login

Ele irá nos pedir nossas credenciais e, preenchendo tudo corretamente, só precisaremos de mais um comando para que nosso projeto seja publicado. Execute:

npm publish

Após o comando finalizar sua execução, tudo estará pronto! O pacote já estará disponível dentro do registro npm, podendo ser consultado diretamente no site. Com isso, você já poderá criar seus próprios pacotes, manipulá-los e até mesmo publicá-los. Para mais tutoriais como esse, continue acessando nosso site, pois os PET Redações não irão parar!

Para acessar o pacote desenvolvido neste artigo, clique aqui.

Aprendendo ainda mais!

O npm ainda tem muitas outras funções que nem foram exploradas neste artigo, então por onde você pode continuar?

Pacotes locais e globais: além da instalação local de pacotes que fizemos, também é possível instalar programas globalmente através do npm. Flávio Copes, desenvolver web, detalha bem a diferença entre os dois métodos, suas vantagens e desvantagens, além de ensinar como fazê-los no texto linkado.
npm Scripts: lembra-se do campo “scripts” no arquivo package.json? Ele pode ser utilizado para criar automatizações para o seu pacote, como uma rotina de testes.
npm-config: boa parte das funções da CLI podem ser configuradas, permitindo que seus projetos já iniciem em um ambiente preparado.
npx: já pensou em executar pacotes npm sem instalá-los, podendo até mesmo especificar suas versões? É o que esse comando poderosíssimo permite!

Além dessas dicas, não deixe de explorar o registro através do site, já que todos os dias são publicados e atualizados diversos novos projetos!

Referências:

Divulgue este conteúdo:

https://ufsm.br/r-791-2674

PET Sistemas de Informação

NPM para iniciantes

Publicações Relacionadas

Publicações Recentes