Erstellen einer Bibliothek aus einer VUE-Komponente und Veröffentlichen in NPM

Ich habe lange Zeit in Vue.js entwickelt, musste aber keine Komponenten für die Veröffentlichung packen. Kürzlich kam die Idee für eine interessante Komponente auf und ich beschloss, sie mit der Community zu teilen. Tatsache ist jedoch, dass ich im russischen Internet keinen umfassenden Leitfaden zu diesem Thema finden konnte. Nachdem ich das Problem untersucht hatte, beschloss ich, meine Lösung zu diesem Thema zu teilen.

Außerdem habe ich beschlossen, dass es schön wäre, die Bereitstellung der Demokomponente an Github-Seiten anzuhängen, damit Entwickler besser sehen können, wie diese Komponente funktioniert.

Die Dokumentation enthält einen Abschnitt, der den Veröffentlichungsprozess cli.vuejs.org/en/guide/deployment.html beschreibt , ist jedoch nicht zum Erstellen einer Bibliothek + Demo + npm geeignet

Installation und Projekterstellung

Wir werden die Vue-CLI verwenden, um das Paket zu erstellen. Ich werde dies nicht im Detail beschreiben, sondern nur Links zu Abschnitten der Dokumentation hinzufügen:

• Installieren Sie gemäß der Dokumentation: cli.vuejs.org/ru/guide/installation.html
• Erstellen Sie ein Projekt: cli.vuejs.org/ru/guide/creating-a-project.html
• Installieren Sie das Paket, um die Bereitstellung auf Github-Seiten zu vereinfachen:
  
  
  
  

  npm install gh-pages --save-dev

WICHTIG: In den Codebeispielen lautet der Name meiner Komponente vue-input-calculator . Vergessen Sie nicht, ihn zu ändern.

Projekt Einstellungen

package.json hier müssen wir hinzufügen / ändern:

{ 
"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 wird erstellt und mit den erforderlichen Parametern gefüllt.

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 erstellt einen separaten Erstellungspunkt für unsere Bibliothek

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

.gitignore - Entfernen Sie den Demo-Ordner aus dem Repository

/demo/
...

Erstellen Sie ein Konto auf npmjs - www.npmjs.com/signup

Entwicklung und Veröffentlichung

Wir führen in der Reihenfolge:

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)

Nach der ersten Bereitstellung wird ein Gh-Pages-Zweig erstellt. Sie müssen zu den Repository-Einstellungen gehen und diesen Zweig installieren, um Github-Seiten anzuzeigen:

Fazit

Das ist alles, jetzt haben wir ein Open Source-Projekt, das wir entwickeln und verbessern können.



Vielen Dank, dass Sie dieses Material gelesen haben. Es ist nicht ideal und nicht für große Projekte mit vielen Komponenten geeignet, vermittelt jedoch ein allgemeines Verständnis der Funktionsweise der Veröffentlichung und Bereitstellung.

UPD. Ich habe das Kontrollkästchen "Tutorial" nicht aktiviert, da ich nicht sicher bin, ob die von mir getroffene Entscheidung richtig war und alles richtig gemacht wurde. Ich wäre sehr dankbar für das Feedback von erfahreneren Kollegen.

Wenn Sie nicht "abgehoben" haben, Sie Inkonsistenzen gefunden haben oder Vorschläge zur Verbesserung dieses Handbuchs haben, schreiben Sie in die Kommentare oder in private Nachrichten.



Vollständiger Code des Beispielprojekts



github.com/lih1989/vue-input-calculator



Verwendete Materialien:

• Ein Artikel, der das Erstellen einer Bibliothekskomponente ( deu ) beschreibt. Itnext.io/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751
• Vue CLI- Dokumentation cli.vuejs.org/ru/guide