Criando e publicando uma biblioteca Javascript no NPM

Introdução

Pensando em uma filosofia open source onde todos podem fazer uso de soluções de maneira gratuita e colaborativa, o que vamos fazer é aprender a criar uma biblioteca JavaScript e publicá-la no NPM, por onde todas as pessoas terão acesso.

Nessa biblioteca vamos ter uma lista com os nomes de várias linguagens de programação que poderão ser usadas como base de dados. Para desenvolver esse projeto vamos precisar do Node.JS e do git instalados em nossa máquina.

Clonando o repositório

Para começar, criamos um repositório no github e marcamos a opção de inicializar com o README. Com isso podemos trazer o repositório para o nosso computador através do comando git clone <url do repositório> e teremos uma resposta parecida com essa:

Já temos todo o ambiente configurado e o repositório no nosso computador. Falta agora criarmos uma conta no NPM.

Criando uma conta no NPM

Para que seja possível publicar nosso pacote precisamos criar uma conta no npmjs. Preenchemos um formulário simples e já estamos prontos para continuar. Mas o que é esse tal NPM?

Eu gosto bastante da definição do site da nodejs:

npm, abreviação de Node Package Manager, é duas coisas: primeiro, é um repositório online para a publicação de projetos Node.js de código aberto; segundo, é um utilitário de linha de comando para interagir com o repositório mencionado, o que ajuda na instalação de pacotes, no gerenciamento de versões e no gerenciamento de dependências. Depois de ter um pacote que você deseja instalar, ele pode ser instalado com um único comando de linha de comando.

Chegou a hora de colocar a mão na massa.

Iniciando nosso pacote

Dentro do nosso repositório vamos realizar alguns comandos:

• npm set init.author.email “seu email aqui”
• npm set init.author.name “seu nome aqui”
• npm set init.license “MIT”

Que está indicando ao NPM nosso nome, email e que nosso projeto tem a licença do MIT.

Logo após essa etapa temos que adicionar o nosso usuário indicando que esse é nosso pacote através do comando:

• npm adduser

O NPM vai fazer algumas perguntas como o nome do usuário sua senha e email cadastrado

Próximo passo é criar o package.json, é esse arquivo que vai conter todas as informações do nosso pacote, como versão, nome, url do repositório entre outras. Novamente vamos usar um comando  do npm que vai nos auxiliar nesse processo:

• npm init

Ele vai fazer uma série de perguntas:

• Nome - Nome do pacote 
• Versão - Versão do pacote
• Descrição - Do que se trata o pacote
• Entry point - Onde a primeira instrução será executada. Aqui vamos deixar como src/index.js, mais para frente vamos criar essa pasta e esse arquivo.
• Test command - Tem relação com testes, vamos deixar vazio por hora
• Github repository - Repositório do github
• Keywords - Palavras chaves que vão facilitar na hora de achar nossa biblioteca
• License - Licença da biblioteca
  A saída vai ser parecida com essa:

Agora se entrarmos na pasta do nosso projeto vamos ver que o arquivo package.json está criado e se abrirmos ele com nosso editor de texto preferido (VScode) podemos ver que todas as configurações estão lá:

Por fim vamos começar a criar nossa biblioteca.

Criando a biblioteca

Dentro da pasta do nosso projeto, vamos criar uma outra pasta chamada src e lá dentro criamos dois arquivos:

linguagens-de-programacao.json um JSON que possui o nome das linguagens:

[ "JavaScript",
"Java",
"Python",
"C#",
"PHP",
"C++",
"C",
"Typescript",
"Ruby",
"Swift",
"Assembly",
"Go",
"Cobol",
"R",
"Pearl"
];

E o nosso arquivo principal chamado index.js( lembra do Entry Point? src/index.js). Aqui precisamos fazer uso do require uma função embutida do nodejs responsável por incluir módulos em arquivos separados.

No nosso caso ela está incluindo linguagens-de-programacao.json dentro do index.js para que possamos usá-lo.

const linguagens = require('./linguagens-de-programacao.json')

Quando as pessoas forem utilizar nossa biblioteca em seus projetos, elas precisarão usar o require para incluí-la dentro do código, então, precisamos exportar nosso código para que ele possa ser importado em outro lugar, e para isso vamos usar o module.exports.

Dentro do module.exports temos um objeto que contém uma propriedade chamada all que vai exibir todas as linguagens quando for executada. 

module.exports = { 
all: linguagens
}

Nosso código final ficou assim: 

const linguagens = require('./linguagens-de-programacao.json')
module.exports = { 
all: linguagens
}

Se fizermos um teste rápido no console do node fazendo um require no nosso entry point e depois executando .all, vamos ter o seguinte resultado:

Podemos ver que ao chamar a teste.all conseguimos exibir todas as linguagens. Estamos quase no fim.

Porém nosso código está apenas no nosso computador, temos que enviar esses arquivos novos de volta para o github.

Adicionando os arquivos no Github

Primeiro usamos o comando git status que vai nos mostrar os arquivos não monitorados,aqueles que criamos depois de clonar o repositório:

Como podemos ver precisamos adicionar ao nosso repositório src/ e package.json. Podemos adicioná-los de uma só vez com o comando git add * e logo depois disso fazemos um commit git commit -m “comentário” para salvar as alterações:

Por fim com o comando git push, mandamos as atualizações de volta para o repositório no github:

Agora falta o último passo, publicar a biblioteca no npm para que todas as pessoas possam ter acesso.

Publicando na npm

Na pasta do nosso projeto basta digitar o comando npm publish e pronto:

Se voltarmos no site da npm podemos ver que nossa biblioteca foi publicada com sucesso https://www.npmjs.com/package/nome-das-linguagens-de-programacao.

Podemos sair da pasta do projeto e instalar a biblioteca rodando o seguinte comando:

npm i nome-das-linguagens-de-programacao

Vamos fazer um teste?

Testando nossa biblioteca

Depois de instalar a biblioteca, criamos um novo arquivo index.js e dentro dele fazemos um require do nosso pacote de imprimimos através do console.log: 

const lang = require('nome-das-linguagens-de-programacao')
console.log( lang.all)

Rodando no nosso terminal temos o seguinte resultado:

Ufa!! depois de criar a conta no github, no npm, configurar o git e criar nosso código Javascript, conseguimos publicar nossa primeira biblioteca no NPM!!!

E se quiser se aprofundar mais no front-end, aqui na Alura temos uma formação front-end para você começar do zero e se tornar um profissional de ponta.