Introdução ao npm

Estou começando uma série sobre desenvolvimento dos blocos Gutenberg é um dos pré-requisitos para se trabalhar com Gutenberg e JavaScript moderno é a utilização de nodeJS e npm. Nesse post iremos realizar uma introdução ao npm e ver qual o seu papel no fluxo de desenvolvimento de blocos Gutenberg.

/rank

Se voce já desenvolveu aplicações em react, Vue e express. Certamente você fez o uso de npm para instalar as dependências da sua aplicação. O npm foi adquirido recentemente pela Microsoft/Github, mas como ele funciona? Isso veremos a seguir:

npm

É um acrônimo da palavra node package manager em outras palavras gerenciador de pacotes node. Ele vem preinstalado com NodeJS, quando instalado temos a capacidade de baixar dependências da nossa aplicação. Quando iniciamos um projeto node temos a criação de uma arquivo chamado package.json.

Nele irá conter a descrição e configuração onde iremos falar mais para frente.

Onde essas dependências estão?

Os diretórios de pacotes nodes ficam disponíveis na nuvem, eles podem ser públicos ou privados. Podemos encontrar os pacotes em diretório online no endereço npmjs.com

Temos uma caixa de busca onde podemos pesquisar por pacotes específicos. Por exemplo, se pesquisarmos por @wordpress/blocks, nesse caso o @wordpress é o escopo dos pacotes e o pacote em si, é block, quando acionarmos a busca iremos achar a página do pacote @wordpress/blocks:

Geralmente na página do pacote vamos ter informações como:

• Descrição
• Código para instalação
• Primeiros passos
• Dependências
• Dependentes
• Downloads semanais
• Versões
• tamanho
• github page
• colaboradores

npm CLI

Podemos dizer para desenvolvedores a interface de linha de comando é a parte mais importante do npm através de linha de comando conseguimos baixar instalar pacotes na nossa aplicação. A estrutura básica de um comando com npm e:

npm <comando> [argumentos]Code language: HTML, XML (xml)

Por exemplo, para instalar um pacote especifico executamos o seguinte código:

npm install webpack

No comando acima instalamos o pacote do webpack, se tudo ocorrer bem o npm irá criar uma pasta node modules com os módulos do webpack e as suas dependências. Além disso, podemos passar adicionar mais parâmetros para escolher uma versão específica ou como iremos gravar a dependência.

Package.json

Funciona como um mapa para sua aplicação nele iremos ter as configurações de dependências da nossa aplicação, organizadas por destino(dev ou produção) e versão. Com npm CLI temos um comando para iniciar um projeto node e criar um package.json.

npm init

Quando executado o comando teremos uma série de perguntas para criar o nosso arquivo package.json:

• package name: preste atenção nesse valor caso queira publicar o seu projeto ele precisa conter um nome único
• version: versão do seu projeto junto com o name ele é utilizado para identificar a aplicação.
• description: descrição do projeto que será exibida quando os usuários buscarem por sua aplicação.
• entry point: arquivo que será inicializado quando a sua aplicação for executada.
• test command: comando para executar testes
• git repository
• keywords: palavras chaves para a busca no repositório
• author: o autor do pacote
• license: tipo de licença do pacote

package-lock.json

package-lock.json é automaticamente gerado contendo informações de quando npm modifica o package.json e a árvore de dependências do projeto. É recomendado ter este arquivo listado no seu repositório pelas seguintes razões:

• Permite aos usuários realizar uma viagem no tempo sobre o projeto.
• Facilitar uma visibilidade maior sobre as mudanças do projeto
• Otimiza o processo de instalação do npm evitando a duplicação de conteúdo.

Dependências

Essas são as informações que vem por padrão, além disso, quando instalamos dependências podemos definir se elas serão de produção ou não. Isso acontece que muitos casos têm dependências de desenvolvimento elas são utilizadas para criar testes ou “compilar” o nosso código como, por exemplo, babel.

As dependências são organizadas por nome e versão em um objeto:

{ "dependencies" :
  { "foo" : "1.0.0 - 2.9999.9999"
  , "bar" : ">=1.0.2 <2.1.2"
  , "baz" : ">1.0.2 <=2.3.4"
  , "boo" : "2.0.1"
  , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
  , "asd" : "http://asdf.com/asdf.tar.gz"
  , "til" : "~1.2"
  , "elf" : "~1.2.3"
  , "two" : "2.x"
  , "thr" : "3.3.x"
  , "lat" : "latest"
  , "dyl" : "file:../dyl"
  }
}Code language: JSON / JSON with Comments (json)

Maioria dos casos trabalhamos com a versão exata, mas podemos ter uma série de regras para versões:

• Versão exata: “1.0.0”
• versão maior que: “>1.0.0”
• versão maior que ou igual: “>=1.0.0”
• versão aproximadamente: “~1.1.0”
• Versão compatível: “1.2.x” pode ser 1.2.1… 1.2.3… 1.2.4…
• URL da versão
• versão definidas por um range: “1.0.0 – 3.0.0” nesse caso maior

devDependencies

Se você tem planos para utilizar a dependência apenas para de desenvolvimento, nesse caso não queremos que o conteúdo dessa dependência vá para produção. Para esse caso utilizamos o seguinte comando:

npm install [nome-do-pacote] --save-devCode language: JavaScript (javascript)

Temos uma série de comandos para npm no meu canal do YouTube gravei dois vídeos falando mais sobre o assunto:

Parte 1

Parte 2

Vamos fechando essa introdução por aqui para mais tutoriais, acesse a página da categoria. Ou deixo uma sugestão sobre um assunto que você gostaria de ver no blog.