Cómo publicar su componente Vue.js en NPM

Has creado un componente increíble con Vue.js que crees que otros desarrolladores podrían usar en sus proyectos. ¿Cómo puedes compartirlo con ellos?

En este artículo, le mostraré cómo preparar su componente para que pueda empaquetarse y publicarse en NPM. Usaré un proyecto de ejemplo y demostraré lo siguiente:

  • Asegurar que las dependencias no estén incluidas en el paquete
  • Uso de Webpack para crear compilaciones separadas para el navegador y el nodo
  • Crear un complemento para el navegador
  • Configuración importante de package.json
  • Publicación en NPM
Nota: este artículo se publicó originalmente aquí en el blog de desarrolladores Vue.js el 31/07/2017

Proyecto de estudio de caso: Vue Clock

He creado este componente de reloj simple que voy a publicar en NPM. Tal vez no sea el componente más genial que hayas visto, pero es lo suficientemente bueno para la demostración.

Aquí está el archivo componente. Aquí no hay nada especial, pero tenga en cuenta que estoy importando la biblioteca de momentos para formatear la hora. Es importante excluir las dependencias de su paquete, que veremos en breve.

Herramienta clave: Webpack

La mayoría de lo que necesito hacer para preparar este componente para NPM se hace con Webpack. Aquí está la configuración básica de Webpack que agregaré en este artículo. No debería incluir muchas sorpresas si ha usado Vue y Webpack antes:

Exterioridad

La opción de configuración externa proporciona una forma de excluir dependencias del paquete de salida de Webpack. No quiero que mi paquete incluya dependencias porque hincharán su tamaño y potencialmente causarán conflictos de versión en el entorno del usuario. El usuario tendrá que instalar las dependencias por sí mismo.

En el proyecto de estudio de caso, estoy usando la biblioteca de momentos como una dependencia. Para garantizar que no se incluya en mi paquete, lo especificaré como externo en mi configuración de Webpack:

Construcciones ambientales

En Vue.js, hay dos entornos diferentes en los que un usuario puede querer instalar un componente. En primer lugar, el navegador, p.

En segundo lugar, entornos de desarrollo basados ​​en Node.js.

Idealmente, quiero que los usuarios puedan usar Vue Clock en cualquier entorno. Lamentablemente, estos entornos requieren que el código se agrupe de manera diferente, lo que significa que tendré que configurar dos compilaciones diferentes.

Para hacer esto, crearé dos configuraciones de Webpack separadas. Esto es más fácil de lo que parece porque las configuraciones serán casi idénticas. Primero crearé un objeto de configuración común, luego usaré webpack-merge para incluirlo en ambas configuraciones de entorno:

La configuración común es exactamente como era antes (he abreviado la mayor parte para ahorrar espacio), excepto que he eliminado las opciones de entrada y salida. Los especificaré individualmente en las configuraciones de compilación separadas.

Paquete de navegador

Los navegadores no pueden importar módulos JavaScript desde otro archivo de la misma manera que un Nodo. Pueden usar un cargador de scripts como AMD, pero para mayor facilidad quiero permitir que mi script de componentes se agregue más simplemente como una variable global.

Además, no quiero que el usuario tenga que pensar demasiado para descubrir cómo usar el componente. Lo haré para que el componente pueda registrarse fácilmente como un componente global cuando el usuario incluya el script. El sistema de complementos de Vue ayudará aquí.

El resultado al que apunto es esta configuración simple:

Enchufar

Primero, crearé un contenedor de complementos para permitir una fácil instalación del componente:

Este complemento registra el componente globalmente, por lo que el usuario puede llamar al componente del reloj en cualquier lugar de su aplicación.

Configuración del paquete web

Ahora usaré el archivo de complemento como punto de entrada para la compilación del navegador. Enviaré a un archivo llamado vue-clock.min.js, ya que será más obvio para el usuario.

Exportando como una biblioteca

Webpack puede exponer su script incluido en una variedad de formas diferentes, p. como un módulo AMD o CommonJS, como un objeto, como una variable global, etc. Puede especificar esto con la opción libraryTarget.

Para el paquete del navegador, usaré el objetivo de la ventana. También podría usar UMD para una mayor flexibilidad, pero como ya estoy creando dos paquetes, limitaré este paquete para usarlo en el navegador.

También especificaré el nombre de la biblioteca como "VueClock". Esto significa que cuando un navegador incluye el paquete, estará disponible como la ventana global. VueClock.

Paquete de nodos

Para permitir a los usuarios usar el componente en un entorno de desarrollo basado en Nodo, usaré el objetivo de la biblioteca UMD para el paquete Node. UMD es un tipo de módulo flexible que permite que el código se use en una variedad de diferentes cargadores de guiones y entornos.

Tenga en cuenta que el paquete Node usa el componente de archivo único como punto de entrada y no usa el contenedor de complementos, ya que no es necesario. Esto permite una instalación más flexible:

package.json

Antes de publicar en NPM, configuraré mi archivo package.json. Una descripción detallada de cada opción está disponible en npmjs.com.

He abreviado la mayor parte de este archivo, pero las cosas importantes a tener en cuenta son:

  1. El archivo de script principal, es decir, "main": "dist / vue-clock.js". Esto señala el archivo de paquete Node, asegurando que los cargadores de módulos sepan qué archivo leer, es decir

2. Dependencias. Como he excluido cualquier dependencia del paquete, los usuarios deben instalar las dependencias para usar el paquete.

Publicación en NPM

Ahora que mi componente está configurado correctamente, está listo para ser publicado en NPM. No repetiré las instrucciones aquí, ya que están bien cubiertas en npmjs.com.

Aquí está el resultado:

  • Código de Github
  • Página NPM
¡Tome un curso gratuito de introducción a Vue.js! Aprenda qué es Vue, qué tipo de aplicaciones puede crear con él, cómo se compara con React & Angular y más en esta introducción de video de 30 minutos. ¡Inscribirse gratis!