Creación de una biblioteca a partir de un componente VUE y publicación en NPM

He estado desarrollando en Vue.js durante mucho tiempo, pero no tuve que empaquetar componentes para su publicación. Recientemente surgió la idea de un componente interesante y decidí compartirlo con la comunidad. Pero el hecho es que no pude encontrar una guía completa sobre este tema en la Internet rusa. Por eso, después de estudiar el tema, decidí compartir mi solución sobre este tema.

Además, decidí que sería bueno adjuntar la implementación del componente de demostración a github-pages, para la conveniencia de los desarrolladores que decidan ver cómo funciona este componente.

La documentación tiene una sección que describe el proceso de publicación cli.vuejs.org/en/guide/deployment.html , pero no es adecuada para construir una biblioteca + demo + npm

Instalación y creación de proyectos

Usaremos la CLI de Vue para crear el paquete. No describiré esto en detalle, solo agregaré enlaces a secciones de la documentación:

• Instale de acuerdo con la documentación: cli.vuejs.org/ru/guide/installation.html
• Cree un proyecto: cli.vuejs.org/ru/guide/creating-a-project.html
• Instale el paquete para simplificar la implementación en github-pages:
  
  
  
  

  npm install gh-pages --save-dev

IMPORTANTE: A continuación, en los ejemplos de código, el nombre de mi componente es vue-input-calculator , no olvide cambiarlo.

Configuración del proyecto

package.json aquí necesitamos agregar / cambiar:

{ 
"name": "vue-input-calculator", 
"homepage": "https://lih1989.github.io/vue-input-calculator/", 
"main": "./lib/vue-input-calculator.common.js", 
"version": "0.1.0", 
"scripts": {
 "serve": "vue-cli-service serve --port 3000",
 "predeploy": "vue-cli-service build --mode demo", 
 "deploy": "gh-pages -d demo", 
 "build": "vue-cli-service build --target lib --name vue-input-calculator src/lib.js", 
 "lint": "vue-cli-service lint" 
}
…
}

vue.config.js se crea y se completa con los parámetros necesarios.

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/'
        : '/vue-input-calculator/',
    outputDir: process.env.NODE_ENV === 'production'
        ? __dirname+'/lib'
        : __dirname+'/demo',
    css: {
        extract: false
    }
};

src / lib.js crea un punto de compilación separado para nuestra biblioteca

import VueInputCalculator from './components/VueInputCalculator'
export default VueInputCalculator

.gitignore : elimina la carpeta de demostración del repositorio

/demo/
...

Cree una cuenta en npmjs - www.npmjs.com/signup

Desarrollo y publicación

Realizamos por orden:

0.  - npm run serve
1.    - npm run build
2.1.  - git commit - m "commit"
2.2.     - git push
3.    - npm run predeploy
4.   gh-pages - npm run deploy
5.    npmjs -  npm publish ( npm login)

Después de la primera implementación, se creará una rama de gh-pages; debe ir a la configuración del repositorio e instalar esta rama para mostrar las páginas de github:

Conclusión

Eso es todo, ahora tenemos un proyecto de código abierto que podemos desarrollar y mejorar.



Gracias por leer este material, no es ideal y no será adecuado para proyectos grandes con muchos componentes, pero dará una comprensión general de cómo funciona la publicación y la implementación.

UPD. No marqué la casilla Tutorial porque no estoy seguro de si la decisión que tomé fue correcta y si todo se hizo correctamente. Estaría muy agradecido por los comentarios de colegas más experimentados.

Si no ha "despegado", ha encontrado inconsistencias o tiene sugerencias para mejorar esta guía, escriba en los comentarios o en mensajes privados.



Código completo del proyecto de ejemplo



github.com/lih1989/vue-input-calculator



Materiales utilizados:

• Un artículo que describe la creación de un componente de biblioteca (eng) itnext.io/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751
• Documentación de Vue CLI cli.vuejs.org/ru/guide