Como criar e publicar uma biblioteca de componentes do Vue

As bibliotecas de componentes estão na moda hoje em dia. Eles facilitam a manutenção de uma aparência consistente em um aplicativo.

Até agora, usei uma variedade de bibliotecas diferentes em minha carreira, mas usar uma biblioteca é muito diferente de saber exatamente o que é necessário para criar uma.

Eu queria uma compreensão mais profunda de como uma biblioteca de componentes é criada e quero mostrar como você também pode entender melhor.

Para criar essa biblioteca de componentes, vamos usar o vue-sfc-rollup pacote npm. Este pacote é um utilitário muito útil ao iniciar uma biblioteca de componentes.

Se você possui uma biblioteca existente com a qual deseja usar o utilitário, consulte o documentação eles providenciam.

Este pacote cria um conjunto de arquivos para o projeto iniciar. Como a documentação explica, os arquivos criados incluem o seguinte (SFC significa Single File Component):

• um mínimo rolar config
• um arquivo package.json correspondente com scripts e dependências de compilação / desenvolvimento
• um arquivo babel.config.js e .browserslistrc mínimo para transpilar
• um invólucro usado pelo rollup ao empacotar seu SFC
• uma amostra de SFC para iniciar o desenvolvimento
• um arquivo de uso de amostra que pode ser usado para carregar / testar seu componente / biblioteca durante o desenvolvimento

O utilitário suporta componentes de arquivo único, bem como uma biblioteca de componentes. É importante observar esta frase na documentação:

No modo de biblioteca, também existe um ‘índice’ que declara os componentes expostos como parte da sua biblioteca.

Tudo isso significa que existem alguns arquivos extras gerados no processo de instalação.

Primeiro você deseja instalar o vue-sfc-rollup globalmente:

npm install -g vue-sfc-rollup

Depois de instalado globalmente, na linha de comandos, vá para o diretório em que deseja que seu projeto de biblioteca esteja localizado. Quando você estiver nessa pasta, execute o seguinte comando para inicializar o projeto.

sfc-init

Escolha as seguintes opções nos prompts:

• Este é um componente único ou uma biblioteca? Biblioteca
• Qual é o nome npm da sua biblioteca? (isso precisará ser exclusivo no npm. Eu usei brian-component-lib)
• Esta biblioteca será escrita em JavaScript ou TypeScript? JavaScript (sinta-se à vontade para usar o TypeScript se você souber o que está fazendo)
• Digite um local para salvar os arquivos da biblioteca: Esse é o nome da pasta que você deseja que sua biblioteca tenha. O padrão será o nome npm que você forneceu acima, para que você possa pressionar enter.

Após a conclusão da instalação, navegue até sua pasta e execute uma instalação npm.

cd path/to/my-component-or-libnpm install

Feito isso, você pode abrir a pasta no seu editor de escolha.

Como mencionado acima, existe um exemplo de componente Vue criado para nós. Você pode encontrá-lo dentro do /src/lib-components pasta. Para ver como esse componente se parece, você pode executar npm run serve e navegue até http: // localhost: 8080 /

Agora vamos adicionar nosso próprio componente personalizado. Crie um novo arquivo Vue dentro do lib-components pasta. Neste exemplo, eu vou imitar o botão usado nas seções de atribuição freeCodeCamp, então o nomeei FccButton.vue

Você pode copiar e colar este código no seu arquivo:

<template>  <button class="btn-cta">{{ text }}</button></template><script>export default {  name: "FccButton", // vue component name  props: {    text: {      type: String,      default: "Enter Button Text Here"    }  },  data() {}};</script><style>.btn-cta {  background-color: #d0d0d5;  border-width: 3px;  border-color: #1b1b32;  border-radius: 0;  border-style: solid;  color: #1b1b32;  display: block;  margin-bottom: 0;  font-weight: normal;  text-align: center;  -ms-touch-action: manipulation;  touch-action: manipulation;  cursor: pointer;  white-space: nowrap;  padding: 6px 12px;  font-size: 18px;  line-height: 1.42857143;}.btn-cta:active:hover,.btn-cta:focus,.btn-cta:hover {  background-color: #1b1b32;  border-width: 3px;  border-color: #000;  background-image: none;  color: #f5f6f7;}</style>

Você pode ver que temos a seção básica de modelos no topo da classe que queremos que ela tenha. Ele também usa o texto que o usuário passará.

Dentro da tag de script, temos o nome do componente e os adereços que o componente receberá. Nesse caso, há apenas um adereço chamado text que tem o padrão “Executar os testes”.

Também temos alguns estilos para dar a aparência que queremos.

Para ver a aparência do componente, precisamos adicioná-lo ao index.js arquivo localizado no lib-components pasta. O seu arquivo index.js deve ficar assim:

/* eslint-disable import/prefer-default-export */export { default as FccButton } from './FccButton';

Você também precisará importar o componente para o diretório serve.vue arquivo dentro do dev pasta para ficar assim:

<script>import Vue from "vue";import { FccButton } from "@/entry";export default Vue.extend({  name: "ServeDev",  components: {    FccButton  }});</script><template>  <div id="app">    <FccButton />  </div></template>

Pode ser necessário executar npm run serve novamente para poder ver o botão, mas ele deve estar visível quando você navegar para http: // localhost: 8080 / no seu navegador.

Então, criamos o componente que queríamos. Você seguirá esse mesmo processo para qualquer outro componente que desejar criar. Apenas certifique-se de exportá-los no diretório /lib-components/index.js para torná-los disponíveis no pacote npm que estamos prestes a publicar.

Agora que estamos prontos para publicar a biblioteca no NPM, precisamos passar pelo processo de compilação para que ela seja empacotada e pronta para uso.

Antes de executar o comando build, recomendo alterar o número da versão no diretório package.json arquivo a ser 0.0.1 já que este é o primeiro evento de publicação da nossa biblioteca. Queremos mais do que apenas um componente na biblioteca antes de lançar a ‘primeira’ versão oficial. Você pode ler mais sobre controle de versão semântico aqui.

Para fazer isso, corremos npm run build.

Como a documentação declara:

A execução do script de construção resulta em 3 arquivos compilados no diretório dist diretório, um para cada um dos main, modulee unpkg propriedades listadas no seu arquivo package.json. Com esses arquivos são gerados, você está pronto para começar!

Com esse comando executado, estamos prontos para publicar no NPM. Antes de fazer isso, verifique se você possui uma conta no NPM (que você pode fazer aqui se você precisar).

Em seguida, precisamos adicionar sua conta ao seu terminal executando:

npm adduser

Compreendendo o package.json

Quando publicamos no npm, usamos o arquivo package.json para controlar quais arquivos são publicados. Se você olhar para o package.json arquivo criado quando configuramos o projeto, você verá algo assim:

"main": "dist/brian-component-lib.ssr.js","browser": "dist/brian-component-lib.esm.js","module": "dist/brian-component-lib.esm.js","unpkg": "dist/brian-component-lib.min.js","files": [    "dist/*",    "src/**/*.vue"],

A seção em files diz à NPM para publicar tudo em nossa dist pasta, bem como qualquer .vue arquivos dentro do nosso src pasta. Você pode atualizar isso como achar melhor, mas deixaremos como está neste tutorial.

Como não estamos alterando nada com o arquivo package.json, estamos prontos para publicação. Para fazer isso, precisamos apenas executar o seguinte comando:

npm publish

E é isso aí! Parabéns! Agora você publicou uma biblioteca de componentes do Vue. Você pode ir para npmjs.com e encontre-o no registro.