O que é npm? Uma Introdução ao Gerenciador de Pacotes do Node

Ao construir projetos, cada um de nós utiliza diversas ferramentas para tornar o desenvolvimento mais fácil e rápido. Na maioria das vezes, essas ferramentas são criadas por outros desenvolvedores e disponibilizadas gratuitamente para uso público.

Mas graças à crescente variedade de recursos gratuitos criados por desenvolvedores, é mais fácil do que nunca evitar todo esse custo e esforço.

Neste tutorial, falaremos sobre o npm (gerenciador de pacotes do Node), um repositório on-line de pacotes JavaScript de código aberto para o Node.js. Vamos conhecer o que é o npm, como utilizá-lo e entender o propósito dos pacotes, além de aprender como interagir com eles localmente e remotamente.

Também vamos usar a interface de linha de comando (CLI), e aprender sobre dependências, scripts e o arquivo package.json.

O que é npm (Node Package Manager)?

Embora você possa ver variações diferentes do significado de npm, a sigla significa “Node package manager” (Gerenciador de pacotes do Node).

npm é um gerenciador de pacotes para projetos Node.js disponibilizados para uso público. Os projetos disponíveis no registro do npm são chamados de “pacotes”.

npm nos permite usar códigos escritos por outros facilmente sem a necessidade de escrevê-los durante o desenvolvimento.

O registro npm tem mais de 1,3 milhões de pacotes sendo usados por mais de 11 milhões de desenvolvedores em todo o mundo. (Falaremos mais sobre pacotes mais tarde neste tutorial.)

Por que usar o npm?

Aqui estão algumas das razões pelas quais você deve usar o npm:

1. Ele permite que você instale bibliotecas, frameworks e outras ferramentas de desenvolvimento para o seu projeto, semelhante à instalação de um aplicativo móvel a partir de uma loja de aplicativos.
2. Você ganha acesso a projetos seguros do Node.js para desenvolvimento.
3. Ele ajuda você a acelerar a fase de desenvolvimento, usando dependências pré-construídas.
4. O npm tem uma grande variedade de ferramentas para escolher sem custo.
5. O uso dos comandos npm não requer muito aprendizado, pois eles são fáceis de entender e fazer uso deles.

A seguir, falaremos sobre a interface de linha de comando npm.

A interface de linha de comando npm (CLI)

A interface de linha de comando para npm é usada para executar vários comandos como instalar e desinstalar pacotes, verificar a versão npm, executar scripts de pacotes, criar arquivo package.json, e muito mais.

Conforme progredimos neste tutorial, veremos alguns dos casos de uso da interface da linha de comando.

Em um computador Windows, normalmente nos referimos à interface de linha de comando como Prompt de Comando. Em um computador Mac, ele é chamado de terminal.

Comandos e pseudônimos essenciais do npm

Nesta seção, vamos rever alguns dos comandos npm mais comumente usados e o que eles fazem.

npm install

Este comando é usado para instalar pacotes. Você pode instalar os pacotes global ou localmente. Quando um pacote é instalado globalmente, podemos usar a funcionalidade do pacote a partir de qualquer diretório em nosso computador.

Por outro lado, se instalarmos um pacote localmente, só podemos fazer uso dele no diretório onde ele foi instalado. Portanto, nenhuma outra pasta ou arquivo em nosso computador pode usar o pacote.

npm uninstall

Este comando é usado para desinstalar um pacote.

npm init

O comando init é usado para inicializar um projeto. Quando você executa este comando, ele cria um arquivo package.json.

Ao executar npm init, você será solicitado a fornecer certas informações sobre o projeto que você está inicializando. Esta informação inclui o nome do projeto, o tipo de licença, a versão, e assim por diante.

Para pular o processo de fornecer as informações você mesmo, você pode simplesmente executar o comando npm init -y.

npm update

Use este comando para atualizar um pacote npm para sua versão mais recente.

npm restart

Usado para reiniciar um pacote. Você pode usar este comando quando você quiser parar e reiniciar um projeto em particular.

npm start

Usado para iniciar um pacote quando necessário.

npm stop

Usado para impedir a execução de um pacote.

npm version

Mostra a versão atual da npm instalada em seu computador.

npm publish

Usado para publicar um pacote npm para o registro npm. Isso é usado principalmente quando você criou seu próprio pacote.

Como instalar o npm

Para instalar o npm, você teria primeiro que instalar o Node.js no seu computador. Para fazer isso, vá até o site do Node.js e faça o download. Recomendamos fazer o download da versão LTS, pois ela é a versão mais estável do Node.js.

A instalação do Node.js instala automaticamente o npm – nenhuma instalação separada é necessária.

Como verificar a versão atual do npm instalado no seu PC

Após instalar o Node.js, execute os seguintes comandos para ver suas versões Node.js e npm:

node -v

O próximo comando mostrará a versão atual da npm:

npm -v

npm packages

Nesta seção, vamos falar sobre como instalar e desinstalar pacotes npm global e localmente, atualizar um pacote, listar pacotes, mudar a localização de um pacote e procurar por pacotes instalados.

Vamos começar discutindo o que é um pacote npm e ver alguns exemplos de pacotes usados pelos desenvolvedores.

O que é um pacote npm?

Um pacote é simplesmente um projeto pré-construído publicado no diretório npm. O que os pacotes podem fazer depende apenas do criador do pacote e dos contribuintes para ele.

Com npm, podemos acessar inúmeros projetos criados por outros desenvolvedores. Imagine criar sua própria framework CSS; isso levaria muito tempo para ser feito. Então os desenvolvedores criam esses projetos e os colocam no registro npm para podermos usá-los e facilitar o processo de desenvolvimento.

Um exemplo desse pacote npm é o Tailwind CSS, um framework de CSS para a build de páginas de internet. Outros pacotes populares de npm incluem React, Chalk, Gulp, Bootstrap, Express, e Vue.js, entre muitos outros.

Como instalar um pacote npm globalmente

Quando você instala um pacote npm globalmente, você consegue acessá-lo de qualquer diretório em seu computador.

Nesta seção, você verá uma maneira prática de instalar um pacote globalmente, executando um comando npm em seu terminal.

Para instalar um pacote globalmente, use este comando:

npm install -g [package name]

Note que a flag -g no comando é o que habilita o npm CLI a instalar o pacote globalmente.

Aqui está um exemplo:

npm install -g typescript

O comando acima irá instalar o TypeScript globalmente em seu computador. Após a instalação, você pode usar o TypeScript em qualquer diretório.

Como instalar um pacote npm localmente

Na seção anterior, vimos como instalar um pacote npm globalmente. Agora vamos falar sobre a instalação de um localmente.

Para instalar um pacote localmente significa que você só pode usar a funcionalidade do pacote no diretório atual. Para fazer isso, você teria que navegar até o diretório que você quer instalar o pacote e executar este comando no terminal:

npm install [package name]

Aqui está um exemplo:

npm install typescript

O comando acima instalará TypeScript localmente, o que significa que ele só funcionará neste diretório atual.

Como desinstalar um pacote npm globalmente

Em situações onde não precisamos mais de um pacote npm, você pode removê-lo do seu computador, desinstalando.

Para desinstalar um pacote globalmente, use isso:

npm uninstall -g [package name]

Veremos um exemplo:

npm uninstall -g typescript

O comando no exemplo acima removerá o pacote TypeScript do seu computador.

Como desinstalar um pacote npm localmente

Desinstalar um pacote npm instalado localmente é similar ao exemplo anterior, exceto desta vez, não estaremos usando a flag -g.

Aqui está a sintaxe:

npm uninstall [package name]

E aqui está um exemplo:

npm uninstall typescript

Como atualizar npm e pacotes

Manter seus npm e pacotes atualizados é a melhor maneira de manter bugs e falhas de segurança longe do seu código.

Para atualizar npm para sua última versão, use o comando abaixo:

npm install npm@latest - g

Isso atualiza o npm globalmente no seu computador.

Quando os criadores de um pacote introduzem novos recursos ou corrigem bugs, eles atualizam o pacote no registro npm. Você então tem que atualizar seu próprio pacote a fim de usar os novos recursos.

Aqui está a sintaxe do comando que você usaria para fazer isso:

npm update [package name]

E aqui está um exemplo:

npm update typescript

O comando acima atualiza o TypeScript para sua versão mais recente.

Além disso, como nas seções anteriores, podemos usar a flag -g para atualizar um pacote globalmente. Ou seja:

npm update -g typescript

Como mudar a localização dos pacotes npm

Para alguns usuários que não têm permissões administrativas em seu computador, a execução de comandos npm pode retornar uma mensagem de erro. Para corrigir isso, você pode alterar o local padrão de instalação de seus pacotes, definindo um novo local/diretório.

Aqui está a sintaxe para fazer isso:

npm config set prefix [new directory path]

Uma vez que você tenha definido o novo caminho para a instalação dos pacotes, todos os seus pacotes npm serão salvos lá por padrão.

Como listar pacotes npm instalados globalmente

Se você está se perguntando como verificar o número de pacotes instalados em seu computador, o npm fornece um comando que os lista.

Entrando no comando abaixo lista todos os pacotes instalados globalmente no seu dispositivo:

npm list -g

Quando o comando acima for executado com sucesso, você verá uma lista completa de pacotes que você já instalou anteriormente em qualquer lugar do seu computador.

Na próxima seção, veremos como listar os pacotes npm instalados localmente.

Como listar pacotes npm instalados localmente

Similar à última seção, também podemos listar pacotes de npm instalados localmente.

Para ver uma lista de pacotes instalados localmente, execute o comando abaixo em seu terminal:

npm list

Você tem que executar o comando acima no diretório do seu projeto a fim de ver todos os pacotes instalados para aquele projeto em particular.

Como procurar por npm pacotes

Há mais de 1,3 milhões de pacotes no registro da npm, todos com diferentes funcionalidades. O pacote certo depende de suas necessidades e objetivos.

Há pacotes que você é obrigado a usar ao trabalhar com certas pilhas de desenvolvimento. Por exemplo, um pacote popular no React é o React Router, usado para roteamento no React.

Da mesma forma, outras pilhas de tecnologia requerem pacotes diferentes.

Você pode usar a barra de pesquisa no site da npm para procurar por pacotes e ver o que cada um faz. A maioria vem com instruções de instalação e detalhes das funcionalidades. Procure por pacotes mantidos regularmente – ou seja, pacotes que estão sendo testados, corrigidos e melhorados em intervalos regulares pelos desenvolvedores da comunidade.

Arquivos e pastas npm adicionais

Agora que temos uma compreensão sólida do que são pacotes de npm e como eles são usados, vamos dar uma olhada em alguns dos outros arquivos e pastas envolvidos em um projeto baseado em npm.

O arquivo package.json

O arquivo package.json nos ajuda a manter o controle de todos os pacotes instalados em um determinado projeto. Ao criar um novo projeto, é importante começar criando este arquivo.

Ele armazena informações sobre um projeto como o nome do projeto, sua versão, scripts, dependências e muito mais.

Você pode fazer isso rodando o comando npm init ou npm init -y no terminal do projeto. Então basta responder todas as perguntas que o sistema faz ao criar o arquivo.

Após gerar o arquivo package.json, todos os pacotes instalados, juntamente com seus nomes e versões, serão armazenados no arquivo.

Outro uso importante do arquivo package.json é visto quando clonamos projetos no GitHub. Quando os desenvolvedores enviam seus projetos para um repositório, eles deixam de fora a pasta node_modules, que contém nossos pacotes e suas dependências.

Para gerar sua própria pasta após clonar um repositório, você tem que executar o comando npm install no terminal do seu projeto. Isso permitirá que o npm passe pelo arquivo package.json do repositório e instale todos os pacotes listados lá.

Depois que a instalação estiver completa, você pode então usar todos os pacotes previamente instalados para aquele projeto antes que ele seja empurrado para o GitHub.

O que são dependências npm?

Quando instalamos pacotes, uma pasta node_modules é criada onde podemos ver outras pastas – ou seja, a pasta e subpastas de cada pacote. Você pode estar se perguntando porque essas outras pastas estão lá quando você não as instalou.

Bem, no seu arquivo package.json, seus pacotes estão listados em dependências porque seu projeto está “dependendo” desses pacotes para que o trabalho seja feito.

As pastas extras criadas em sua pasta node_modules são outros pacotes adicionais dos quais seus pacotes instalados dependem a fim de lhe dar as melhores funcionalidades. Você pode verificar isso facilmente olhando para o arquivo package.json de um pacote instalado para ver suas dependências.

O que são npm scripts?

Os scripts npm são scripts personalizados definidos no arquivo package.json, a fim de automatizar certas tarefas. Você também pode definir seus próprios scripts para automatizar várias tarefas, como minificar seu código CSS, reiniciar seu servidor toda vez que alterações são feitas, construir um projeto para produção, e assim por diante.

Quando criamos um arquivo package.json, geralmente existe um script test gerado com o arquivo. Podemos usar scripts para fazer uma variedade de tarefas como iniciar um servidor, minificar nosso CSS, compactar nosso código para produção, e assim por diante.

Um exemplo popular de um desses scripts é o npm run start no React, que gira nosso servidor de desenvolvimento em localhost:3000.

Como o script acima, podemos executar outros scripts usando esta sintaxe de comando:

npm run [script-name]

Resumo

Ao longo dos anos, npm se tornou uma necessidade no desenvolvimento de aplicativos web baseadas no Node.js. npm nos dá acesso a milhões de projetos implantados por outros desenvolvedores que você pode usar gratuitamente para promover seu próprio projeto.

Há uma grande variedade de pacotes npm que vão desde frameworks CSS, pacotes de arquivos, frameworks JavaScript, ferramentas backend, e muito mais. Estes projetos também são seguros para outros desenvolvedores usarem, e muitos são mantidos e atualizados regularmente.

Com npm, o desenvolvimento de aplicativos web se tornou mais fácil; não somos obrigados a recriar a roda. Tudo o que temos que fazer é instalar outro pacote de desenvolvimento e nos poupar horas de codificação.

Como desenvolvedores, também podemos criar nossos próprios pacotes npm e publicá-los no registro npm para que outros desenvolvedores os utilizem. Assim como os usuários da comunidade WordPress contribuem para a melhoria e o sucesso da plataforma, também os membros da comunidade Node.js podem.

Você criou alguma ferramenta que ajuda na sua fase de desenvolvimento que você adoraria que outros desenvolvedores usassem? Compartilhe suas ideias na seção de comentários!