Cómo crear, publicar y usar su propia biblioteca de componentes VueJS en NPM usando @ vue / cli 3.0

Aunque he estado trabajando en VueJS por un tiempo, nunca tuve que publicar un componente en npm. La razón por la que lo estamos haciendo ahora es porque creamos aplicaciones para Flock, y se vuelve bastante loco reescribir componentes en diferentes aplicaciones. La tercera vez que estaba desarrollando una aplicación usando Vue.js, sentí que necesitábamos algunos componentes altamente configurables pero reutilizables.

Flock, al ser una herramienta de comunicación empresarial amigable para el desarrollador, tiene su propio lenguaje de diseño y permite integraciones sin problemas de terceros. Es decir: cualquier desarrollador puede crear una aplicación para sus equipos Flock o incluso puede desarrollarla para todo el ecosistema. Por lo tanto, era necesario que todos los componentes de la interfaz de usuario fueran coherentes con el tema y los colores de la aplicación. Tener componentes preconstruidos que se adhirieran al tema del diseño haría que el desarrollo fuera mucho más rápido (y más divertido). Es por eso que comencé a escribir algunos componentes que podrían reutilizarse a través de npm.

Entonces, vamos a hacerlo. Lo primero es lo primero, debe instalar vue-cli para comenzar.

npm install -g @ vue / cli
# o
hilo global agregar @ vue / cli
vue crear mi-vue-biblioteca
Estamos utilizando la versión beta vue-cli 3.0. Es posible que note una advertencia que dice "No lo use en producción todavía a menos que sea aventurero", pero seguiremos adelante e ignoraremos eso.

Ahora debería terminar con un aspecto similar a este:

Contenido de la carpeta my-vue-library

Ahora todo lo que tiene que hacer para comenzar es:

npm ejecutar servir

Comencemos con la creación de un componente simple ahora. Tomemos el ejemplo de un componente de Banner.

El componente se puede usar simplemente en la plantilla después de registrarlo como un componente llamado Banner:

 ¡Esto es un banner! 

¡Vea el código en CodeSandbox para obtener una demostración funcional de los componentes! Un gran agradecimiento a Ives van Hoorne por hacer esta increíble aplicación. Ahora, si desea utilizar este componente a través de npm, debe hacer algunas cosas.

Hemos escrito algunos componentes para Flock aquí, puede que le resulte útil como referencia.

Paso 1: configuración de la compilación de la biblioteca

Deberá aprovechar vue-cli para construir sus componentes como una biblioteca. Agregue vue-cli-service build --target lib --name myLib [entry] a sus scripts package.json.

[entrada] es su App.vue de forma predeterminada, pero puede cambiarlo a la ruta relativa de cualquier archivo en el que esté importando esos componentes. Puede o no elegir registrar globalmente esos componentes, aunque los registraría con el nombre de mi biblioteca como prefijo si fuera usted. Cuanto menor sea el código para el desarrollador que usa estos componentes, mejor.

Agregué build-bundle a mis scripts para poder ejecutar npm run build-bundle para crear mi paquete de biblioteca.

Agregue su comando de compilación a los scripts

Esto genera una salida similar a esta:

Construyendo tu biblioteca

Para el ejemplo de CodeSandbox, el archivo de entrada debería verse así:

src / components / index.js

Paso 2: apunta hacia tu archivo de salida en package.json

Asegúrese de que su atributo principal en package.json esté apuntando correctamente hacia su archivo de salida. Prefiero usar el paquete commonjs.

El atributo principal en su package.json apunta hacia su archivo de salida

Paso 3: agrega el atributo de archivos a tu package.json

Este es un paso importante. Necesitamos especificar qué archivos deben cargarse en `npm` cada vez que publiquemos nuestro paquete. Simplemente eliminaremos todos los archivos que nos preocupan, en caso de que alguien quiera usar el SFC (Componente de archivo único) de la carpeta src.

"archivos": [
  "dist / *",
  "src / *",
  "público/*",
  "* .json",
  "* .js"
],

Paso 4: Agregar / Iniciar sesión en npm como usuario

Asegúrate de estar registrado en npm. npm adduser para registrar un nuevo usuario y npm login para iniciar sesión como usuario existente.

Paso 5: verificar las credenciales de usuario de npm

Escriba npm whoami para verificar su nombre de usuario.

Paso 6: nombrar la biblioteca de componentes

Elija un nombre para su paquete, debe asegurarse de que aún no esté en uso. Asegúrese de ponerlo en su package.json.

Elija un nombre único y modifíquelo en su paquete.json

Paso 7— Construir

Cree su paquete ejecutando el script de paquete que agregó en el paso 1.

npm run build-bundle

Paso 8: publicar su biblioteca de componentes en npm

Runnpm Publish: acceso público para publicar la biblioteca para acceso público.

Y eso es. ¡Ya terminaste de publicar tu biblioteca de componentes Vue en npm!

Paso 9 (Editado): cómo usar la biblioteca recién publicada

Todo lo que queda es instalar su biblioteca de componentes desde npm e importar los componentes a su código. Instalar:

npm install --save [myLibName]

myLibName es el nombre de su biblioteca que proporcionó en el Paso 6.

En su main.js, o un punto de entrada similar, solo importe su biblioteca usando:

importar 'myLibName';

Ahora, puede comenzar a usar sus componentes listos para usar, ya que los registramos globalmente en el Paso 1.

Hemos registrado globalmente todos nuestros componentes.

Para nuestro banner de componente de ejemplo, el nombre del componente es FlockBanner cuando lo registramos. Por lo tanto, puede usarlo directamente en su plantilla como:

 Este es un ejemplo de Banner 

Consulte el ejemplo en vivo utilizando la biblioteca de componentes mencionada anteriormente: https://codesandbox.io/s/n9n7yy2lwp

Finalmente, hemos terminado. Fácil de guisante limón exprimido! Después de que el equipo de Vue.js presentara la versión 3 de CLI, se ha vuelto súper fácil crear su propia biblioteca de componentes para su reutilización. ¡Dale una palmada a este artículo si te ha resultado útil!

Recursos:

https://github.com/vuejs/vue-cli/blob/dev/docs/build-targets.md
https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#building-as-library-or-web-component
Biblioteca de componentes de la bandada: https://github.com/talk-to/vue-components
Cómo usar desde NPM: https://codesandbox.io/s/n9n7yy2lwp