@buttkus/workshop-vue-component-library NPM

my-vue-component-library

Hands On: Eine Vue-Komponentenbibliothek erstellen, mit npm paketieren und als Scoped-Package (öffentlich) per Registry bereitstellen

Die nachfolgende Anleitung kann als ein Rezept verstanden werden, um mithilfe von npm und der Vue CLI eine in Vue.js (V2) geschriebene Komponentenbibliothek zu paketieren und als Scoped-Package (User-Scoped) in der npm Registry zu veröffentlichen. Außerdem wird gezeigt, wie das erstellte Paket in anderen Vue-Projekten eingebunden und die implementierten Komponenten dort benutzt werden können. Diese Anleitung informiert indes nicht über Details von npm oder im Umgang mit Vue.js. Zu diesem Zweck sei auf die offiziellen Dokumentationen verwiesen 2,3.

1. Voraussetzungen

Du hast Visual Studio Code installiert (https://code.visualstudio.com/).
Du hast Node.js installiert (https://nodejs.org/en/).
Du hast die Vue CLI installiert (https://cli.vuejs.org/guide/installation.html).
Du besitzt einen npm-Account, welcher für den Publishing-Schritt genutzt werden kann. Ein kostenloser Account kann auf der Webseite von npm für diesen Workshop angelegt werden.

2. Durchführung

Diese nachfolgenden Einzelschritte sind teilweise an den Blogpost aus 1 angelehnt.

2.1 Vorbereiten eines neuen Vue-Projektes:

Zunächst soll ein neues Vue-Projekt angelegt werden, das unsere zu paketierenden Komponenten beinhalten wird.

Öffne dazu eine Konsole (cmd, bash).
Erstelle ein neues Vue-Projekt mit dem Befehl: vue create my-vue-component-library.
Wähle das Template Default (Vue 2 babel, eslint) zur Erstellung aus.
Wechsle in das erstelle Verzeichnis: cd my-vue-component-library.
Öffne das erstellte Vue-Projekt in Visual Studio Code: code .
Installiere die Abhängigkeiten aus der package.json mit dem Befehl: npm install.
Vergewissere Dich, dass das Projekt gebaut und per Dev-Server ausgeliefert werden kann: npm run serve.

2.2 Erstellung einer einfachen Komponente:

Nun soll eine Vue-Komponente (SFC) erstellt werden, welche in den folgenden Schritten paketiert werden wird.

Erstelle eine neue Datei FancyTextBox.vue im Verzeichnis .\src\components.

Füge Quellcode so ein, dass eine einfache wiederverwendbare Vue-Komponente entsteht, die Text (z. B. auf einen <div> basierend) per Default Slot darstellen soll. Du kannst alternativ den folgenden Quellcode in die Datei einfügen

<template>
    <div class="text-box">
        <slot>Your text here...</slot>
    </div>
</template>

<script>
    export default {
        name: "FancyTextBox",
    };
</script>

<style scoped>
.text-box {
    background-color: rgba(0, 0, 255, 0.3);
}
</style>

Lege im Verzeichnis .\src die Datei index.js an.

Füge folgende Zeile in die Datei .\src\index.js ein:

export { default as FancyTextBox } from "./components/FancyTextBox.vue";

Binde die erstellte Komponente testweise in die Komponente HelloWorld.vue ein, um sicherzustellen, dass die Komponente Deinen Vorstellungen entspricht. Dies sollte per Import aus der Datei index.js geschehen, da diese Datei den Einstiegspunkt in unser zu erstellendes npm-Paket darstellt und wir sichergehen möchten, dass der Import funktioniert.

2.3 Konfiguration des Library-Builds in der package.json:

Um die bis hierhin erstellten Komponenten als wiederverwendbare Library zu bauen, ist es möglich, die Vue CLI zu diesem Zwecke mit einem bestimmten Build Target zu benutzen. Dies soll folgend beschrieben werden.

Füge in der package.json innerhalb der Eigenschaft scripts das Schlüssel-Wert-Paar "build-library": "vue-cli-service build --target lib --name my-vue-component-library ./src/index.js" hinzu.

Der Parameter --target lib steuert dabei, dass es sich um einen Library-Build handelt. Wie sich dieser von dem Standard-Build unterscheidet, könnt ihr in der offiziellen Dokumentation der Vue CLI nachvollziehen. Der Parameter --name my-vue-component-library vergibt einen Namen für die zu bauenden JavaScript-Module. Mit dem letzten Parameter ./src/index.js wird der Eintrittspunkt in die Komponentenbibiliothek bestimmt.

2.4 Bereitstellung von Paketmetainformationen in der package.json:

In diesem Abschnitt wird beschrieben, wie die Metainformationen des zu erstellenden Paketes zu bearbeiten sind.

Führe folgende Anpassungen in der package.json durch:
- Vergib einen user-scoped Paketnamen zu einem npm-Benutzer, den Du besitzt, z. B. "name": "@your-user/my-vue-component-library".
- Entferne die Eigenschaft "private": true.
- Passe die Version an, z. B. auf "version": "0.1.0".
- Befülle die Autoreneigenschaft: "author": "Forename Surname".
- Wähle eine freie Lizenz, z. B. "license": "ISC".
- Füge ggf. Stichwörter über das Array keywords hinzu.
- Füge ggf. eine Beschreibung des Paketes in der Eigenschaft description ein.

2.5 Weitere Vorbereitungen der package.json für die Paketierung:

Führe folgende Anpassungen in der package.json durch:
- Setze die Eigenschaft main auf die Common-Ausgabe des Library-Builds: ./dist/my-vue-component-library.common.js.
- Setze die Eigenschaft files, welche die Menge der Dateien bestimmt, die ins npm-Repository hochgeladen werden, wie folgt:
```
  "files": [
  "dist/*",
  "src/*",
  "public/*",
  "*.json",
  "*.js"
  ],`
```

2.7 Die Komponentenbibliothek als Paket bei npm veröffentlichen:

Nun soll die Komponentenbibiliothek als npm-Paket veröffentlicht werden.

Öffne eine Konsole (cmd, bash).
Führe das erstellte Build-Skript npm run build-library aus.
Führe einen Login bei npm durch: npm login.
Nutze den Befehl npm whoami, um die Benutzerdaten zu kontrollieren.
Veröffentliche das gebaute Paket durch Ausführen des Befehls: npm publish --access public.

2.8 Die veröffentlichte Komponentenbibliothek in einem weiteren Projekt einbinden

In diesem Abschnitt wird beschrieben, wie die erstellte und veröffentlichte Vue-Komponentenbibiliothek in einem weiteren Vue-Projekt eingebunden und benutzt werden kann.

Öffne eine Konsole (cmd, bash).
Erstelle ein neues Vue-Projekt mit dem Befehl: vue create my-vue-component-library-consument.
Wähle das Template Default (Vue 2 babel, eslint) zur Erstellung aus.
Wechsle in das erstelle Verzeichnis: cd my-vue-component-library-consument.
Öffne das erstellte Vue-Projekt in Visual Studio Code: code .
Installiere die Abhängigkeiten: npm install.
Vergewissere Dich, dass das Projekt gebaut und per Dev-Server ausgeliefert werden kann: npm run serve.
Installiere das zuvor bei npm veröffentlichte Paket mithilfe des Befehls npm install --save @your-user/my-vue-component-library.

Importiere die SFC FancyTextBox innerhalb der HelloWorld.vue im Skriptteil per

import { FancyTextBox } from "@your-user/my-vue-component-library";

...

components: {
    FancyTextBox,
},

...

Die Komponente kann nun per <fancy-text-box>...</fancy-text-box> genutzt werden.

3. Literatur

How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0: https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3
npm Dokumentation: https://docs.npmjs.com/
Vue.js Dokumentation: https://vuejs.org/v2/guide/

vue component library workshop

core-js vue

@infinitebrahmanuniverse/nolb-_but @everything-registry/sub-chunk-148 @zalastax/nolb-_but

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago