Vue Component Library létrehozása és közzététele

Az alkotókönyvtárak manapság nagy divat. Ezek megkönnyítik az alkalmazás megjelenésének és hangulatának fenntartását.

Eddigi pályafutásom során számos különféle könyvtárat használtam, de a könyvtár használata nagyon különbözik attól, hogy pontosan tudjam, mi jár belőle.

Alaposabban szerettem volna megérteni, hogy miként épül fel egy komponens könyvtár, és szeretném megmutatni, hogyan is érthet jobban.

A komponens könyvtár létrehozásához az vue-sfc-rollupnpm csomagot fogjuk használni . Ez a csomag nagyon hasznos segédprogram egy komponens könyvtár indításakor.

Ha van olyan könyvtár, amellyel használni szeretné a segédprogramot, olvassa el az általuk biztosított dokumentációt.

Ez a csomag fájlkészletet hoz létre a projekt elindításához. Amint a dokumentációjuk megmagyarázza, az általa létrehozott fájlok a következőket tartalmazzák (az SFC az Single File Component rövidítést jelenti):

  • minimális összegző konfiguráció
  • egy megfelelő package.json fájl build / dev szkriptekkel és függőségekkel
  • minimális babel.config.js és .browserslistrc fájl az átfordításhoz
  • egy burkoló, amelyet az SFC csomagolásakor az összesítés használ
  • egy minta SFC a fejlesztés elindításához
  • egy minta használati fájl, amely felhasználható az alkatrész / könyvtár betöltésére / tesztelésére a fejlesztés során

A segédprogram támogatja az egyfájlos összetevőket, valamint az összetevők könyvtárát. Fontos megjegyezni ezt a mondatot a dokumentációból:

Könyvtári módban van egy "index" is, amely a könyvtár részeként deklarálja az összetevőket.

Mindez azt jelenti, hogy van néhány extra fájl a telepítési folyamat során.

Klassz, építsük fel a könyvtárat

Először vue-sfc-rollupglobálisan kell telepíteni :

npm install -g vue-sfc-rollup

A globális telepítés után a parancssorból lépjen abba a könyvtárba, ahol a könyvtári projektet szeretné elhelyezni. Miután ebben a mappában van, futtassa a következő parancsot a projekt inicializálásához.

sfc-init

Válassza ki a következő lehetőségeket az utasításokban:

  • Ez egy komponens vagy egy könyvtár? Könyvtár
  • Mi a könyvtárad npm neve? (ennek egyedinek kell lennie az npm-en. Brian-component-lib-t használtam )
  • Ez a könyvtár JavaScript-ben vagy TypeScript-ben lesz megírva? JavaScript (nyugodtan használjon TypeScript-t, ha tudja, mit csinál)
  • Adja meg a könyvtárfájlok mentési helyét: Ez a mappa neve, amelyet a könyvtárnak szeretne használni. Alapértelmezés szerint az npm nevet adta meg, amelyet fent adott neki, így egyszerűen be tudja nyomni az Enter billentyűt.

A beállítás befejezése után keresse meg a mappát, és futtasson egy npm telepítést.

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

Miután ez megtörtént, megnyithatja a mappát a kívánt szerkesztőben.

Ahogy fentebb említettük, van egy számunkra készült Vue komponens. A /src/lib-componentsmappában található. Ha meg szeretné nézni, hogy néz ki ez az összetevő, akkor futtassa npm run serveés keresse fel a // localhost: 8080 /

Most adjuk hozzá a saját egyedi komponensünket. Hozzon létre egy új Vue fájlt a lib-componentsmappa belsejében . Ebben a példában utánozni fogom a freeCodeCamp hozzárendelési szakaszokban használt gombot, ezért megnevezemFccButton.vue

Másolhatja és beillesztheti ezt a kódot a fájljába:

 {{ 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; } 

Láthatja, hogy a tetején van az alap sablon rész azzal az osztállyal, amelyet szeretnénk. Használja azt a szöveget is, amelyet a felhasználó be fog adni.

A script tag belsejében van az Component név és a kellékek, amelyeket a komponens be fog venni. Ebben az esetben csak egy olyan meghívás textvan, amelynek alapértelmezett értéke a "Run the Tests".

Van némi stílusunk is, hogy megkapjuk a kívánt megjelenést.

Az összetevő megjelenésének megtekintéséhez hozzá kell adnunk a index.jsmappában található fájlhoz lib-components. Az index.js fájlnak így kell kinéznie:

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

Az összetevőt serve.vuea devmappában lévő fájlba is importálnia kell, hogy így nézzen ki:

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

Lehet, hogy npm run serveújra kell futtatnia , hogy lássa a gombot, de ennek láthatónak kell lennie, amikor a böngészőben a // localhost: 8080 / webhelyre navigál.

Tehát megépítettük a kívánt alkatrészt. Ugyanezt a folyamatot fogja követni minden más összetevőnél, amelyet fel akar építeni. Csak győződjön meg róla, hogy exportálja őket a /lib-components/index.jsfájlba, hogy elérhetővé tegye őket a közzétenni készülő npm csomagból.

Közzététel az NPM-nél

Most, hogy készen állunk a könyvtár közzétételére az NPM-ben, át kell mennünk az összeállítási folyamaton, hogy csomagolható és készen álljon.

Mielőtt futtatnánk a build parancsot, javasoljuk, hogy változtassa meg a package.jsonfájl verziószámát, 0.0.1mivel ez a könyvtárunk első közzétételi eseménye. A hivatalos „első” verzió kiadása előtt nem csak egy komponensre lesz szükségünk a könyvtárban. A szemantikus verzióról itt olvashat bővebben.

Ehhez futunk npm run build.

Amint a dokumentáció kimondja:

Futás a build script eredmények 3 összeállított fájlokat a distkönyvtárba, az egyik az egyes main, moduleés unpkgfelsorolt tulajdonságok a package.json fájlt. Ezekkel a fájlokkal létrehozva készen áll az indulásra!

Ezzel a parancsfuttatással készek vagyunk közzétenni az NPM-ben. Mielőtt ezt megtennénk, győződjön meg róla, hogy rendelkezik fiókkal az NPM-en (amit itt megtehet, ha szükséges).

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.