PNPM: Uma alternativa ao NPM

Como desenvolvedores, precisamos de um gerenciador de pacotes que facilite a organização e o compartilhamento dos mesmos, assim como os módulos do ambiente onde programamos.

Aqueles que usam Node.js têm NPM por padrão. No entanto, a maior desvantagem que temos com este é a grande quantidade de espaço em disco que ocupamos em cada projeto, ou seja, se tivermos 50 projetos onde usamos a mesma dependência, teremos 50 cópias dessa dependência salvas em disco.

Não é o caso do PNPM (Performant NPM), um gerenciador de pacotes aprimorado que chega a ser duas vezes mais rápido que o NPM e até as outras alternativas, e permite que todos os 50 projetos sejam vinculados em uma única dependência.

Por que o PNPM é mais rápido que o NPM?

O PNPM não possui etapas de bloqueio de instalação, pois cada dependência possui suas próprias etapas e a próxima inicia o mais rápido possível e não terminando todas de uma vez.

A seguir, explicarei passo a passo como instalá-lo e utilizá-lo em nossos projetos, criando uma pequena aplicação com React.js e Vite.

Como instalamos o PNPM?

A maneira mais fácil de instalar o PNPM é usando o NPM:

Como verificamos se já o temos instalado?

👉 Se você não usa o NPM, não se preocupe: você pode instalar de outras formas. A seguir, descrevo as diferentes formas que existem para a instalação:

🖥️  Se você usa o Windows, pode instalá-lo no PowerShell:

🖥️  Com sistemas POSIX:

1. Através do curl:

2.     Através do wget:

🖥️  Com o Alpine Linux:

Se você precisar instalar uma versão específica, use o seguinte:

Se você deseja instalar uma versão específica, faça o seguinte:

🖥️  Com o Corepack

Desde sua versão 16.13, o Node.js nos envia o Corepack para gerenciar gerenciadores de pacotes. É importante saber que esta é uma função totalmente experimental, portanto deve ser previamente habilitada com o comando:

Se você instalou o Node.js usando o Homebrew, precisará instalar o Corepack separadamente da seguinte forma:

A execução do procedimento acima instalará automaticamente o PNPM. No entanto, provavelmente não é a versão mais recente. Por isso deve ser atualizado, verificando qual é a última versão do NPM e executar:

👉 Se você estiver usando o Node.js versão 16.17 ou posterior, poderá instalar a versão mais recente do PNPM apenas especificando a tag latest como esta:

🖥️  Com o Homebrew

Se você tiver este gerenciador de pacotes instalado em seu sistema, poderá instalar o PNPM assim:

🖥️ Com o Scoop

Se você já possui o Scoop em seu sistema, instale o PNPM com o seguinte:

O PNPM pode ser usado em servidores CI?

Claro! O PNPM pode ser usado com muita facilidade em vários sistemas de integração contínua:

📌 Se você usa o GitbLab Cli:

Para armazenar em cache e instalar suas dependências, edite o arquivo .gitlab-ci.yml:

📌 Se você usa Bitbucket Pipelines: Assim como no GitLab, você deve editar seu arquivo .bitbucket-pipelines.yml.

📌 Caso você utilize Azure Pipelines: Lembre-se que esta edição é feita no arquivo .azure-pipelines.yml:

📌 Caso você utilize o GitHub Actions: Lembre-se que esta edição é feita no arquivo .github/workflows/NAME.yml.

📌 Se você utiliza o AppVeyor: Lembre-se que esta edição é feita no arquivo .appveyor.yml.

É importante mencionar que se você trabalha com Git, deve ter cuidado com o arquivo package-lock.yarml, para evitar erros ao usar seu repositório.

Assim como no NPM, usaremos o comando init, ou seja, pnpm init, mas recomendo tomar cuidado com as alterações que fizer antes de commitá-las, pois ele irá compilar os pacotes mais atualizados (ideal para a grande maioria dos casos), mas se não for seu objetivo, melhor revê-lo.

Como o PNPM realiza o tratamento de dependências?

Quando já o tivermos instalado, precisaremos implementá-lo, algo muito semelhante ao uso do NPM. A seguir, descrevo os comandos mais usados ​​e como implementá-los:

✅ Adicionar pacotes

Usamos o comando:

Por padrão, ele se encarregará de instalar o pacote em sua versão mais recente. Se quisermos instalar uma versão mais específica, usaremos tags, versão específica ou intervalo de versões. Se aplicarmos o exemplo com express teríamos:

🔵 Com tag:

🔵 Usando a versão:

🔵 Com gama de versões:

Conforme mencionado acima, este comando instalará a versão mais recente especificada no nome do pacote do registro NPM por padrão.

✅ Atualização de pacotes

Você tem várias maneiras de fazer isso. Você deve escolher aquele que melhor se adapta ao que você precisa. Aqui está um exemplo usando-o para Babel:

🔵 Se você deseja atualizar todo o pacote, deve implementar:

🔵 Caso queira abrir exceções na atualização, utilize:

O acima atualiza todas as dependências em nosso projeto, exceto para webpack.

É importante saber que combinações podem ser feitas nesses padrões. Por exemplo:

No primeiro comando atualizaremos todo o pacote Babel e no segundo atualizaremos o Babel exceto o core.

✅ Instalação do pacotes

Como o NPM, o PNPM funciona com o comando:

📌  Dentro de um workspace, este comando instalará todas as dependências em todos os seus projetos. Para evitar isso, você pode desabilitar a função de recursão: recursive-install false.

🔍  Suporta aliases, isso significa que se você rodar com i funcionará da mesma forma.

✅ Desinstalar pacotes

Inserir o comando:

Isso removerá tudo o que estava em node_modules do package.json do seu projeto. Se você deseja remover apenas um, adicione o nome ao final do comando.

Podemos usar scripts com o PNPM?

Claro que sim! Veja como fazer:

✅ Create

Usamos PNPM seguido de create. Por exemplo, com React.js o script seria:

✅  Test

Executa um comando que realizamos com a propriedade script no test do pacote. Isso pode funcionar para executar testes de unidade ou testes de integração no projeto.

✅ Start

É usado para iniciar um pacote quando necessário. Executa um comando que executamos no script do start do package em scripts.

É importante saber que se nada for especificado na parte do script, por padrão ele executará o Node Server.js e se não for especificado dará um erro.

Vamos criar um exemplo prático

Conhecendo tudo o que foi dito acima, explicarei um exemplo simples. Vamos supor que queremos criar um aplicativo. Na parte dos scripts expliquei que podemos usar:

Mas e se você quiser construir o projeto com alguma ferramenta de construção? Neste exemplo, usaremos o Vite.js para criar um aplicativo com React e JavaScript.

👉 Usarei o Visual Studio Code como editor de código, embora você possa usar o que mais gostar.

Passo 1: O terminal ficará assim:

Passo 2: procedemos à instalação de todas as dependências.

Passo 3: Você verá que o projeto é criado como faria com o NPM, com o detalhe que em node_modules notamos que aparece a seta de referência.

O que significa aqui é que ele está usando a instalação de dependência de outro projeto em meu sistema para referenciá-lo e não reinstalá-lo. A grande vantagem disso é que economiza muito espaço em disco, proporcional ao número de projetos e dependências, e você tem instalações muito mais rápidas!

Passo 4: Instale uma dependência de desenvolvimento (neste caso, react-icons):

🔍  É importante saber que se a dependência gerar um erro ou aviso, o terminal nos mostrará uma mensagem mais estética e informativa do que usando o NPM.

👉 Aqui irei para a pasta pai chamada React, onde não tínhamos nenhum package-lock, tentando sempre instalar os ícones do React para mostrar como aparece um erro:

🔍 Vemos que, ao instalar, envia um alerta e não instala até que seja resolvido. Este alerta nos diz que devemos ter todo o pacote react@”*” instalado para prosseguir com a instalação. Vamos resolver isso seguindo as instruções do console:

Em seguida, você pode excluí-lo, pois temos o React instalado na pasta de exemplo:

Passo 5: Removido o acima, vamos para a pasta de exemplo e agora vamos iniciar o Vite.

📌 Esclareço que, a título de explicação, desta vez não usaremos o script dev e sim o start:

🔍 Vemos que, por padrão, ele procura o arquivo server.js e, ao não encontrá-lo, gera um erro. Agora vamos editar o script e ver como o Vite inicia normalmente:

Pronto! Já temos uma aplicação tornada funcional em React e praticamos alguns comandos básicos ensinados anteriormente 😀.

⚠️  Algo a mais que gostaria de acrescentar é que, ao implantar nosso projeto, provavelmente dará algum erro, pois primeiro você deve saber se onde você vai subir sua página suporta PNPM.

Atualmente, as opções mais comuns para carregar seu projeto são Netlify ou Vercel. Ambos já suportam PNPM. Para Vercel, você precisa ter o PNPM versão 5.4 ou posterior para carregar seu projeto. Aqui você pode ver a documentação do Vercel onde explica isso.

Conclusão

O PNPM é uma excelente opção para melhorar o desempenho dos monorepositórios, e pode ser utilizado em nossos projetos que realizamos diariamente, pois possui ferramentas para modificar o que vem por padrão.

Diante do exposto, é uma ótima alternativa ao NPM e até mesmo a outros gerenciadores de pacotes. O projeto PNPM está no GitHub e, se quiser mais informações, convido você a dar uma olhada na documentação oficial.

Este tem sido o meu guia para explicar passo a passo como integrar o PNPM em seus projetos futuros. Espero que você ache útil.

Anime-se a experimentar esta opção no seu desenvolvimento 💻 😊.

Até logo!