Como criar e publicar uma biblioteca (em Vue) no npm?
Olá meus queridos, tudo bem com vocês?
Hoje venho mostrar pra vocês como criar uma biblioteca simples no Vue e como publicar ela no NPM. Esse foi um desafio que me deparei esses dias no trabalho e pude aprender algumas coisas.
Vocês vão ver que não nada de anormal e você pode fazer com um projeto que você acha que pode ajudar outras pessoas, você pode colocar seu projeto no mundo, para qualquer um usar com um yarn add ...
Sem mais papo, vamos lá.
Requisitos
Para poder criar e publicar suas biblioteca, você precisa de 3 coisas:
- Um projeto que será sua biblioteca; (nesse tutorial iremos usar o Vue)
- Ter esse projeto no gihtub/gitlab;
- Uma conta no npm (https://www.npmjs.com/signup)
Simples, certo?
Se você deseja apenas saber como transformar seu projeto em uma biblioteca e publicar no npm, pode pular para o passo 4.
Passo 1: criando o projeto
Para criar o projeto, basta ter o vue-cli instalado, para instalar:
Então, você pode seguir dois caminhos:
Com pressa: basta clonar o repositório que eu mesmo criei com o vue-create , rode o comando:
git clone https://github.com/leonardofalmeida/biblioteca-simples-vue.git
E pronto, está clonado. O projeto sem alterações está na master.
Sem pressa:
Vá na pasta que você deseja iniciar o projeto e rode o comando:
vue create <nome_do_seu_projeto>
Apenas vá apertando enter e seu projeto está criado.
Passo 2: subindo seu projeto para o seu repositório favorito
Se você clonou meu repositório, pode pular para o passo 3.
Se você criou o seu projeto com o vue create , basta criar um repositório no repositório de sua escolha (github, gitlab, bitbucket…) e seguir os passos para subir seu projeto local para lá.
Passo 3: criando seu componente
Agora as coisas vão ficar legais.
Vamos criar um componente que faça algo. Vamos criar um componente que recebe um valor monetário e o formate para o formato brasileiro.
Criei um componente simples, lembrando que não estou me preocupando com validações, melhor implementação, é apenas um componente simples, que recebe como props um valor e formata o mesmo.
Componente criado e funcionando. Para testar, basta importar o mesmo no App.vue e testa-lo. Se você clonou meu repositório basta dar checkout na branch cria_biblioteca .
Passo 4: transformando seu componente em biblioteca
Agora vem a parte principal, vamos transformar seu componente criado, em uma biblioteca.
Na raiz da sua pasta src/ , crie um arquivo index.js e use o seguinte código:
Esse trecho de código, foi retirado diretamente da documentação do Vue:
Atenção nas seguintes linhas:
linha 1: importamos o nosso componente, com o nome component
linha 7: registramos o nome do nosso componente como biblioteca-simples-vue
Por enquanto, temos a seguinte disposição de pastas:
Pronto, basicamente expomos nosso componente, para poder ser usado com o Vue.use(...) em algum outro projeto.
Passo 5: editando nosso package.json
Agora vamos editar nosso package.json, para preparar para o build e publicar no npm.
Agora vamos explicar algumas linhas:
linha 1: esse é o nome da sua biblioteca e como ele será conhecido no npm (ele não poderá ser igual a nenhum outro já publicado);
linha 2: a versão da sua biblioteca, isso será importante para atualizar novas versões;
linha 4: o arquivo de entrada da sua biblioteca, no nosso caso esse arquivo fica na pasta dist/ e usa o arquivo de entrada bibliotecaSimplesVue.common.js . Essa pasta e arquivo serão criados ao rodar o comando build:npm da linha 10;
linha 10: cria o script para gerar o build como uma lib, nele são definidos o nome da biblioteca (bibliotecaSimplesVue) e o arquivo de entrada (src/index.js), que é o que possui no metodo install;
linha 45: define quais arquivo serão enviados para o npm e consequetemente, quais arquivos aparecerão na na node_modules quando alguém adicionar sua biblioteca.
Eu acho necessário apenas enviar os arquivos que estão na
dist/mas algumas pessoas mandam mais coisas.
Passo 6: gerando o build
Agora vamos gerar o build, basta rodar o comando:
yarn build:npm
Você verá que foi criado a pasta dist/ com arquivos minificados.
Passo 7: publicando no npm
No seu terminal, digite:
npm login
Digite seu username, senha e email e aperte enter.
Se tudo der certo, aparecerá a mensagem
E então você estará logado.
Agora, dê o comando
npm publish
Se tudo der certo, aparecerá isso
Pronto! Você acaba de publicar sua primeira biblioteca usando Vue.
Agora basta instalar em algum projeto seu e usá-lo!
FAQ
1 — Fiz uma alteração no projeto e tentei publicar novamente, mas não consegui, o que fazer?
Provavelmente você não atualizou a versão da sua biblioteca, sempre que você quiser publicar novas alterações para sua biblioteca, você precisa atualizar a versão, isso pode ser feito de duas maneiras:
- Atualize manualmente o package.json na propriedade version;
- Use o comando
npm version <numero_da_versão>
E tente publicar de novo. Vou deixar um link no final do texto, para você saber como versionar direitinho sua biblioteca¹.
2 — Meu bundle final está ficando muito grande, como saber o que está deixando ele tão pesado?
Adicione o seguinte script no seu package.json:
Rode o comando e será criado um arquivo na pasta dist/ com nome <nome_da_sua_biblioteca>.common-report.json e faça o upload para esse site:
Ele gerará um relatórios com as bibliotecas usadas e o tamanho de cada.
Links
¹ versionamento de projeto: https://webpack.jakoblind.no/optimize/
Repositório do projeto: https://github.com/leonardofalmeida/biblioteca-simples-vue/tree/cria_biblioteca
NPM do projeto: https://www.npmjs.com/package/biblioteca-simples-vue
Redes sociais
Linkedin: https://www.linkedin.com/in/leonardofalmeida/
Twitter: https://twitter.com/leofalm
