Kuidas luua, avaldada ja kasutada NPM-is oma VueJS-i komponentide teeki, kasutades rakendust @ vue / cli 3.0

Ehkki olen juba mõnda aega töötanud VueJS-i kallal, pole mul kunagi olnud vaja komponenti npm-il avaldada. Põhjus, miks me seda praegu teeme, on see, et ehitame rakendusi Flocki jaoks ja see muudab erinevate rakenduste jaoks üsna hulluks komponentide ümberkirjutamise. Kolmandal korral, kui arendasin rakendust Vue.js kasutades, tundsin, et vajame mõnda väga konfigureeritavat, kuid korduvkasutatavat komponenti.

Flockil, mis on arendajasõbralik ettevõttesuhtluse tööriist, on oma kujunduskeel ja see võimaldab sujuvalt integreerida kolmanda osapoole ettevõtteid. Tähendus - iga arendaja saab ehitada rakenduse oma Flock-meeskondadele või ta saab seda isegi kogu ökosüsteemi jaoks välja töötada. Seetõttu oli vaja, et kõik kasutajaliidese komponendid vastaksid rakenduse teemale ja värvidele. Eelprojekteeritud kujunduse teemaga kooskõlas olevate komponentide omamine muudaks arengu palju kiiremaks (ja lõbusamaks). Seetõttu hakkasin kirjutama mõnda komponenti, mida saaks npm kaudu uuesti kasutada.

Laskem siis selle alla. Esiteks peate alustamiseks installima vue-cli.

npm install -g @ vue / cli
# või
lõng globaalne add @ vue / cli
vue loo minu-vue-raamatukogu
Kasutame vue-cli 3.0 beetaversiooni. Võite märgata hoiatust, mis ütleb: „Ärge kasutage veel tootmises, kui te pole seiklushimuline”, kuid jätkame seda ja ignoreerime seda.

Peaksite nüüd lõpuks välja nägema umbes selline:

Minu-vue-raamatukogu kausta sisu

Nüüd peate alustamiseks tegema ainult järgmist:

npm joosta teenima

Alustame nüüd lihtsa komponendi loomisega. Võtame näiteks ribareklaami komponendi.

Komponenti saab mallis lihtsalt kasutada pärast seda, kui olete selle registreerinud komponendiks Banner:

 See on riba! 

Tutvuge CodeSandboxi koodiga, et leida komponentide toimivat demo! Hiiglaslik hüüd Ives van Hoorne'ile selle hämmastava rakenduse tegemise eest. Kui soovite seda komponenti kasutada npm kaudu, peate tegema mõned toimingud.

Oleme siin mõne Flocki komponendi kirjutanud, ehk on sellest abi viitamiseks.

1. samm - raamatukogu ehituse seadistamine

Oma komponentide raamatukoguna ehitamiseks peate kasutama vue-cli. Lisage oma paketi.jsoni skriptidesse vue-cli-service build --target lib - name myLib [entry].

[sisestus] on vaikimisi teie App.vue, kuid saate selle muuta mis tahes faili suhteliseks teeks, kuhu neid komponente impordite. Võite võib-olla valida nende komponentide ülemaailmse registreerimise, ehkki kui ma ise oleksin, registreeriksin nad oma teegi nimega eesliitena. Mida väiksem kood arendajale, kes neid komponente kasutab, seda parem.

Olen lisanud oma skriptidesse kogumikomplekti, et saaksin oma raamatukogukogumi loomiseks käitada juba npm käivituskomplekti.

Lisage skriptidele oma ehitamise käsk

See loob sarnase väljundi:

Raamatukogu ehitamine

CodeSandboxi näite korral peaks sisendfail välja nägema umbes selline:

src / components / index.js

2. samm - osutage paketi.json väljundfaili poole

Veenduge, et teie peamine atribuut paketis.json oleks õigesti suunatud väljundfaili poole. Eelistan kasutada Commonjsi kimpu.

peamine atribuut teie paketis.json osutab väljundfailile

3. samm - lisage failide atribuut oma paketti.json

See on oluline samm. Peame täpsustama, millised failid tuleks npm-i üles laadida, kui me oma paketi avaldame. Lükkame src-kaustast välja kõik failid, mis meile muret valmistavad.

"failid": [
  "dist / *",
  "src / *",
  "avalik/*",
  "* .json",
  "* .js"
],

4. samm - kasutajana npm-i lisamine / sisselogimine

Veenduge, et olete registreerunud npm. npm adduser uue kasutaja registreerimiseks ja npm sisselogimine olemasoleva kasutajana sisselogimiseks.

5. samm - npm kasutaja mandaadi kontrollimine

Sisestage oma kasutajanime kinnitamiseks npm whoami.

6. samm - oma komponentide kogu nimetamine

Valige oma paketi nimi, peate veenduma, et seda pole juba võetud. Pange see kindlasti oma paketti.json.

Valige kordumatu nimi ja muutke seda oma paketis.json

7. samm - ehitage

Koostage oma kimp, käivitades 1. etapis lisatud paketi skripti.

npm käivituskomplekt

8. samm - komponentide raamatukogu avaldamine npm-l

Runnpm publishing - pääseb avalikkusele avaldamiseks raamatukogu avaldamiseks.

Ja see ongi kõik. Vue Component teegi avaldamine on juba tehtud npm-l!

9. samm (redigeeritud) - kuidas oma värskelt avaldatud teeki kasutada

Jääb vaid installida oma komponentide teek npm-st alates ja importida komponendid oma koodi. Paigaldama:

npm install --save [myLibName]

myLibName on teie teegi nimi, mille andsite etapis 6.

Importige oma teegis main.js või sarnases sisenemispunktis oma teeki lihtsalt järgmistel viisidel:

impordi 'myLibName';

Nüüd saate hakata oma komponente karbist väljas kasutama, kuna registreerisime neid komponente globaalselt 1. etapis.

Olime kõik oma komponendid globaalselt registreerinud

Meie näidiskomponendi ribareklaami puhul on komponendi nimi FlockBanner, kui me selle registreerisime. Seega saate seda oma mallis otse kasutada järgmiselt:

 See on näidisriba 

Vaadake reaalajas näidet, kasutades ülalnimetatud komponentide teeki: https://codesandbox.io/s/n9n7yy2lwp

Lõpuks oleme valmis. Käkitegu! Pärast seda, kui Vue.js meeskond tuli välja CLI 3. versiooniga, on muutunud ülilihtne oma komponentide kogu taaskasutamiseks luua. Pange see artikkel plaksutama, kui leidsite, et sellest on abi!

Ressursid:

https://github.com/vuejs/vue-cli/blob/dev/docs/build-targets.md
https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#building-as-library-or-web-component
Flock Component Library: https://github.com/talk-to/vue-components
Kuidas NPM-ist kasutada: https://codesandbox.io/s/n9n7yy2lwp