Cómo crear y publicar una biblioteca de componentes de Vue

Las bibliotecas de componentes están de moda en estos días. Facilitan el mantenimiento de una apariencia uniforme en una aplicación.

Hasta ahora he usado una variedad de bibliotecas diferentes en mi carrera, pero usar una biblioteca es muy diferente a saber exactamente lo que implica hacer una.

Quería una comprensión más profunda de cómo se construye una biblioteca de componentes, y quiero mostrarte cómo puedes obtener una mejor comprensión también.

Para crear esta biblioteca de componentes, usaremos el vue-sfc-rolluppaquete npm. Este paquete es una utilidad muy útil al iniciar una biblioteca de componentes.

Si tiene una biblioteca existente con la que desea utilizar la utilidad, consulte la documentación que proporcionan.

Este paquete crea un conjunto de archivos para que el proyecto comience. Como explica su documentación, los archivos que crea incluyen lo siguiente (SFC significa Componente de archivo único):

  • una configuración de resumen mínima
  • un archivo package.json correspondiente con scripts de build / dev y dependencias
  • un archivo babel.config.js y .browserslistrc mínimo para transpilar
  • una envoltura utilizada por rollup al empaquetar su SFC
  • un ejemplo de SFC para poner en marcha el desarrollo
  • un archivo de uso de muestra que se puede usar para cargar / probar su componente / biblioteca durante el desarrollo

La utilidad admite tanto componentes de archivo único como una biblioteca de componentes. Es importante tener en cuenta esta frase de la documentación:

En el modo de biblioteca, también hay un 'índice' que declara los componentes expuestos como parte de su biblioteca.

Todo esto significa que hay algunos archivos adicionales generados en el proceso de instalación.

Genial, construyamos la biblioteca

Primero querrá instalar vue-sfc-rollupglobalmente:

npm install -g vue-sfc-rollup

Una vez que esté instalado globalmente, desde la línea de comandos, vaya al directorio donde desea que se ubique su proyecto de biblioteca. Una vez que esté en esa carpeta, ejecute el siguiente comando para inicializar el proyecto.

sfc-init

Elija las siguientes opciones dentro de las indicaciones:

  • ¿Es este un solo componente o una biblioteca? Biblioteca
  • ¿Cuál es el nombre npm de su biblioteca? (esto deberá ser único en npm. Usé brian-component-lib )
  • ¿Esta biblioteca estará escrita en JavaScript o TypeScript? JavaScript (siéntase libre de usar TypeScript si sabe lo que está haciendo)
  • Ingrese una ubicación para guardar los archivos de la biblioteca: este es el nombre de la carpeta que desea que tenga su biblioteca. Por defecto, tendrá el nombre npm que le dio arriba para que pueda presionar Enter.

Una vez completada la configuración, navegue hasta su carpeta y ejecute una instalación de npm.

cd path/to/my-component-or-lib npm install

Una vez hecho esto, puede abrir la carpeta en el editor de su elección.

Como se indicó anteriormente, hay un componente de muestra de Vue creado para nosotros. Puede encontrarlo dentro de la /src/lib-componentscarpeta. Para ver cómo se ve este componente, puede ejecutar npm run servey navegar a // localhost: 8080 /

Ahora agreguemos nuestro propio componente personalizado. Crea un nuevo archivo Vue dentro de la lib-componentscarpeta. Para este ejemplo, voy a imitar el botón usado en las secciones de asignación de freeCodeCamp, así que lo nombraréFccButton.vue

Puede copiar y pegar este código en su archivo:

 {{ text }}   export default { name: "FccButton", // vue component name props: { text: { type: String, default: "Enter Button Text Here" } }, data() {} };   .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; } 

Puede ver que tenemos la sección de plantilla básica en la parte superior con la clase que queremos que tenga. También utiliza el texto que pasará el usuario.

Dentro de la etiqueta del script tenemos el nombre del componente y los accesorios que el componente aceptará. En este caso, solo hay un accesorio llamado textque tiene por defecto "Ejecutar las pruebas".

También tenemos algo de estilo para darle el aspecto que queremos que tenga.

Para ver cómo se ve el componente, necesitaremos agregarlo al index.jsarchivo ubicado en la lib-componentscarpeta. Su archivo index.js debería verse así:

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

También deberá importar el componente al serve.vuearchivo dentro de la devcarpeta para que se vea así:

 import Vue from "vue"; import { FccButton } from "@/entry"; export default Vue.extend({ name: "ServeDev", components: { FccButton } }); 

Es posible que deba ejecutar npm run servenuevamente para poder ver el botón, pero debería estar visible cuando navegue a // localhost: 8080 / en su navegador.

Entonces, hemos construido el componente que queríamos. Seguirá este mismo proceso para cualquier otro componente que desee construir. Solo asegúrese de exportarlos en el /lib-components/index.jsarchivo para que estén disponibles en el paquete npm que estamos a punto de publicar.

Publicar en NPM

Ahora que estamos listos para publicar la biblioteca en NPM, debemos pasar por el proceso de compilación para que esté empaquetada y lista para funcionar.

Antes de ejecutar el comando de compilación, recomiendo cambiar el número de versión en el package.jsonarchivo, 0.0.1ya que este es el primer evento de publicación para nuestra biblioteca. Querremos más de un componente en la biblioteca antes de lanzar la 'primera' versión oficial. Puede leer más sobre el control de versiones semántico aquí.

Para hacer esto, corremos npm run build.

Como dice la documentación:

La ejecución de la escritura de la estructura en 3 archivos compilados en el distdirectorio, uno para cada uno de los main, moduley unpkglas propiedades que figuran en el archivo de package.json. Con estos archivos generados, ¡estás listo para comenzar!

Con este comando ejecutado, estamos listos para publicar en NPM. Antes de hacer eso, asegúrese de tener una cuenta en NPM (lo que puede hacer aquí si lo necesita).

Next we'll need to add your account to your terminal by running:

npm adduser

Understanding package.json

When we publish to npm, we use the package.json file to control what files are published. If you look at the package.json file that was created when we initially set up the project you'll see something like this:

"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" ],

The section under files tells npm to publish everything in our dist folder as well as any .vue files inside of our src folder. You can update this as you see fit, but we'll be leaving it as is for this tutorial.

Because we aren't changing anything with the package.json file, we are ready to publish. To do that we just need to run the following command:

npm publish

And that is it! Congratulations! You've now published a Vue component library. You can go to npmjs.com and find it in the registry.