Sådan oprettes og udgives et Vue-komponentbibliotek

Komponentbiblioteker er raseri i disse dage. De gør det let at opretholde et ensartet look og feel på tværs af en applikation.

Jeg har hidtil brugt en række forskellige biblioteker i min karriere, men at bruge et bibliotek er meget anderledes end at vide nøjagtigt, hvad der går i at lave et.

Jeg ønskede en mere dybtgående forståelse af, hvordan et komponentbibliotek er bygget, og jeg vil gerne vise dig, hvordan du også kan få en bedre forståelse.

For at oprette dette komponentbibliotek skal vi bruge vue-sfc-rollupnpm-pakken. Denne pakke er et meget nyttigt værktøj, når du starter et komponentbibliotek.

Hvis du har et eksisterende bibliotek, som du vil bruge hjælpeprogrammet sammen med, skal du se i den dokumentation, de leverer.

Denne pakke opretter et sæt filer, som projektet kan starte med. Som deres dokumentation forklarer, inkluderer de filer, den opretter, følgende (SFC står for Single File Component):

  • en minimal rollup-konfiguration
  • en tilsvarende package.json-fil med build / dev-scripts og afhængigheder
  • en minimal babel.config.js- og .browserslistrc-fil til transpilering
  • et indpakningspapir, der bruges ved sammenpakning, når du pakker din SFC
  • en prøve SFC til at starte udviklingen
  • en prøveforbrugsfil, der kan bruges til at indlæse / teste din komponent / bibliotek under udviklingen

Hjælpeprogrammet understøtter både enkeltfilkomponenter samt et bibliotek med komponenter. Det er vigtigt at bemærke denne sætning fra dokumentationen:

I biblioteketilstand er der også et 'indeks', der erklærer komponenterne eksponeret som en del af dit bibliotek.

Alt dette betyder, at der er nogle ekstra filer genereret i installationsprocessen.

Lad os bygge biblioteket

Først skal du installere vue-sfc-rollupglobalt:

npm install -g vue-sfc-rollup

Når det er installeret globalt, skal du fra kommandolinjen gå ind i det bibliotek, hvor dit biblioteksprojekt skal placeres. Når du er i den mappe, skal du køre følgende kommando for at initialisere projektet.

sfc-init

Vælg følgende indstillinger inden for vejledningen:

  • Er dette en enkelt komponent eller et bibliotek? Bibliotek
  • Hvad er npm-navnet på dit bibliotek? (dette skal være unikt på npm. Jeg brugte brian-component-lib )
  • Vil dette bibliotek blive skrevet i JavaScript eller TypeScript? JavaScript (du er velkommen til at bruge TypeScript, hvis du ved hvad du laver)
  • Indtast en placering for at gemme biblioteksfilerne: Dette er det mappenavn, du vil have dit bibliotek. Det vil som standard være det npm-navn, du gav det ovenfor, så du bare kan trykke på enter.

Når installationen er afsluttet, skal du navigere til din mappe og køre en npm-installation.

cd path/to/my-component-or-lib npm install

Når det er gjort, kan du åbne mappen i din valgte editor.

Som nævnt ovenfor er der en prøve Vue-komponent bygget til os. Du kan finde den inde i /src/lib-componentsmappen. For at se, hvordan denne komponent ser ud, kan du køre npm run serveog navigere til // localhost: 8080 /

Lad os nu tilføje vores egen brugerdefinerede komponent. Opret en ny Vue-fil inde i lib-componentsmappen. I dette eksempel vil jeg efterligne den knap, der bruges i afsnittene om freeCodeCamp-tildeling, så jeg navngiver detFccButton.vue

Du kan kopiere og indsætte denne kode i din fil:

 {{ text }}   export default { name: "FccButton", // vue component name props: { text: { type: String, default: "Enter Button Text Here" } }, data() {} };   .btn-cta { background-color: #d0d0d5; border-width: 3px; border-color: #1b1b32; border-radius: 0; border-style: solid; color: #1b1b32; display: block; margin-bottom: 0; font-weight: normal; text-align: center; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; white-space: nowrap; padding: 6px 12px; font-size: 18px; line-height: 1.42857143; } .btn-cta:active:hover, .btn-cta:focus, .btn-cta:hover { background-color: #1b1b32; border-width: 3px; border-color: #000; background-image: none; color: #f5f6f7; } 

Du kan se, at vi har den grundlæggende skabelonsektion øverst med den klasse, vi vil have den. Det bruger også den tekst, som brugeren sender.

Inde i script-tagget har vi komponentnavnet og de rekvisitter, som komponenten vil tage i. I dette tilfælde er der kun en prop kaldet, textder har standard "Kør testene".

Vi har også noget styling for at give det det udseende, vi vil have det.

For at se, hvordan komponenten ser ud, skal vi tilføje den til index.jsfilen i lib-componentsmappen. Din index.js-fil skal se sådan ud:

/* eslint-disable import/prefer-default-export */ export { default as FccButton } from './FccButton';

Du skal også importere komponenten til serve.vuefilen inde i devmappen for at se sådan ud:

 import Vue from "vue"; import { FccButton } from "@/entry"; export default Vue.extend({ name: "ServeDev", components: { FccButton } }); 

Du skal muligvis køre npm run serveigen for at kunne se knappen, men den skal være synlig, når du navigerer til // localhost: 8080 / i din browser.

Så vi har bygget den komponent, vi ønskede. Du vil følge den samme proces for enhver anden komponent, du vil bygge. Bare sørg for at eksportere dem til /lib-components/index.jsfilen for at gøre dem tilgængelige fra den npm-pakke, vi er ved at offentliggøre.

Udgivelse til NPM

Nu hvor vi er klar til at udgive biblioteket til NPM, er vi nødt til at gennemgå byggeprocessen for at det kan pakkes op og klar til brug.

Før vi kører build-kommandoen, anbefaler jeg at ændre versionsnummeret i package.jsonfilen til at være, 0.0.1da dette er den allerførste udgivelsesbegivenhed for vores bibliotek. Vi vil have mere end kun en komponent i biblioteket, inden vi frigiver den officielle 'første' version. Du kan læse mere om semantisk version her.

For at gøre dette løber vi npm run build.

Som det fremgår af dokumentationen:

Kører de build script resulterer i 3 kompilerede filer i distmappen, en for hver af de main, moduleog unpkgegenskaberne i din package.json fil. Med disse filer genereres, er du klar til at gå!

Med denne kommandokørsel er vi klar til at offentliggøre til NPM. Inden vi gør det, skal du sørge for at have en konto på NPM (som du kan gøre her, hvis du har brug for det).

Next we'll need to add your account to your terminal by running:

npm adduser

Understanding package.json

When we publish to npm, we use the package.json file to control what files are published. If you look at the package.json file that was created when we initially set up the project you'll see something like this:

"main": "dist/brian-component-lib.ssr.js", "browser": "dist/brian-component-lib.esm.js", "module": "dist/brian-component-lib.esm.js", "unpkg": "dist/brian-component-lib.min.js", "files": [ "dist/*", "src/**/*.vue" ],

The section under files tells npm to publish everything in our dist folder as well as any .vue files inside of our src folder. You can update this as you see fit, but we'll be leaving it as is for this tutorial.

Because we aren't changing anything with the package.json file, we are ready to publish. To do that we just need to run the following command:

npm publish

And that is it! Congratulations! You've now published a Vue component library. You can go to npmjs.com and find it in the registry.