Kuinka julkaista Vue.js-komponentti NPM: ssä

Olet tehnyt mahtava komponentin Vue.js: n avulla, jota muut kehittäjät voisivat mielestäsi käyttää projekteissaan. Kuinka voit jakaa sen heidän kanssaan?

Tässä artikkelissa esitän sinulle kuinka valmistaa komponentti niin, että se voidaan pakata ja julkaista NPM: ssä. Käytän esimerkkiprojektia ja esittelen seuraavat:

  • Varmista, että riippuvuudet eivät sisälly pakettiin
  • Webpackin avulla erillisten rakenteiden luominen selaimelle ja Solmulle
  • Luo laajennus selaimeen
  • Tärkeä paketin.json kokoonpano
  • Julkaiseminen NPM: ssä
Huomaa: Tämä artikkeli julkaistiin alun perin täällä Vue.js-kehittäjien blogissa 31.7.2017

Tapaustutkimusprojekti: Vue Clock

Olen luonut tämän yksinkertaisen kellokomponentin, jonka aion julkaista NPM: ssä. Ehkä se ei ole tyylikkäin osa mitä olet koskaan nähnyt, mutta se on tarpeeksi hyvä esittelyyn.

Tässä on komponentitiedosto. Tässä ei ole mitään erityistä, mutta huomaa, että tuon hetkikirjastoa ajan muotoiluun. On tärkeää sulkea pois riippuvuudet paketistasi, jota tarkastelemme pian.

Keskeinen työkalu: Webpack

Suurin osa mitä tarvitsen valmistaaksesi tämä komponentti NPM: ään, tehdään Webpackilla. Tässä on Webpackin perusasetukset, joita lisään tässä artikkelissa. Siihen ei pitäisi sisältyä monia yllätyksiä, jos olet aiemmin käyttänyt Vue- ja Webpack-sovelluksia:

ulkonaiset muodot

Ulkopuolinen kokoonpanovaihtoehto tarjoaa tapa poistaa riippuvuudet Webpack-lähtöpaketista. En halua, että paketini sisältäisi riippuvuuksia, koska ne paisuttavat sen koon ja voivat mahdollisesti aiheuttaa ristiriitoja käyttäjän ympäristössä. Käyttäjän on itse asennettava riippuvuudet.

Tapaustutkimusprojektissa käytän hetkekirjastoa riippuvuutena. Varmistan, että sitä ei niputa pakettiini, määrittäen sen ulkoiseksi Webpack-kokoonpanossani:

Ympäristö rakentuu

Vue.js-versiossa on kaksi erilaista ympäristöä, joissa käyttäjä saattaa haluta asentaa komponentin. Ensinnäkin selain esim.

Toiseksi Node.js-pohjaiset kehitysympäristöt, esim.

Ihannetapauksessa haluan, että käyttäjät voivat käyttää Vue Clockia kummassakin ympäristössä. Valitettavasti nämä ympäristöt vaativat koodin niputtamisen eri tavalla, mikä tarkoittaa, että minun on määritettävä kaksi erilaista rakennetta.

Tätä varten luon kaksi erillistä Webpack-kokoonpanoa. Tämä on helpompaa kuin miltä kuulostaa, koska kokoonpanot ovat melkein identtiset. Aluksi luon yhteisen määritysobjektin ja sisällytän sen sitten webpack-merge -sovellukseen molempiin ympäristömäärityksiin:

Yleinen kokoonpano on täsmälleen sellainen kuin se oli ennen (olen lyhentänyt sitä suurimmaksi osaksi tilan säästämiseksi), paitsi että olen poistanut merkinnän ja output.filename-asetukset. Määritän nämä erikseen erillisissä rakennuskokoonpanoissa.

Selaimen kimppu

Selaimet eivät voi tuoda JavaScript-moduuleja toisesta tiedostosta samalla tavalla kuin solmu. He voivat käyttää komentosarjojen latauslaitetta, kuten AMD, mutta haluan parhaan mahdollisuuden sallia komponenttikomentosarjan lisääminen yksinkertaisemmin globaalina muuttujana.

En myöskään halua, että käyttäjän on ajateltava liian kovaa päättääkseen komponentin käytön. Suoritan sen, jotta komponentti voidaan helposti rekisteröidä globaaliksi komponentiksi, kun käyttäjä sisällyttää komentosarjan. Vue-laajennusjärjestelmä auttaa tässä.

Tulokseni, johon pyrin, on tämä yksinkertainen asennus:

Kytkeä

Ensin luon plugin-kääreosan komponentin helpon asennuksen mahdollistamiseksi:

Tämä laajennus rekisteröi komponentin maailmanlaajuisesti, joten käyttäjä voi soittaa kellokomponentille missä tahansa sovelluksensa alueella.

Verkkopakkauksen kokoonpano

Käytän nyt laajennustiedostoa selaimen rakennuksen lähtökohtana. Tulostan tiedostoon nimeltä vue-clock.min.js, koska se on käyttäjän kannalta ilmeisin.

Vienti kirjastona

Webpack voi paljastaa paketoidun komentosarjan monin eri tavoin, esim. AMD- tai CommonJS-moduulina, objektina, globaalina muuttujana jne. Voit määrittää tämän LibraryTarget-vaihtoehdolla.

Käytän selainpakettia ikkunakohteena. Voisin myös käyttää UMD: tä joustavuuden lisäämiseksi, mutta koska olen jo luonut kaksi kimppua, rajoitan tämän kimpun vain selaimeen.

Annan myös kirjaston nimen VueClock. Tämä tarkoittaa, että kun selain sisältää paketin, se on saatavana globaalina ikkunana.VueClock.

Solmupaketti

Jotta käyttäjät voivat käyttää komponenttia solmuperusteisessa kehitysympäristössä, käytän UMD-kirjaston tavoitetta solmupaketissa. UMD on joustava moduulityyppi, joka sallii koodin käytön useissa erilaisissa komentosarjojen latauslaitteissa ja ympäristöissä.

Huomaa, että Solmu-paketti käyttää yksitiedostokomponenttia lähtökohtanaan eikä käytä plugin-käärettä, koska sitä ei tarvita. Tämä mahdollistaa joustavamman asennuksen:

package.json

Asennan paketti.json-tiedostoni ennen julkaisua NPM: ssä. Yksityiskohtainen kuvaus jokaisesta vaihtoehdosta on saatavana osoitteessa npmjs.com.

Olen lyhennyt suurimman osan tästä tiedostosta, mutta tärkeitä huomioitavia asioita ovat:

  1. Pääskriptitiedosto, ts. "Main": "dist / vue-clock.js". Tämä osoittaa Solmu-paketitiedoston ja varmistaa, että moduulien lataajat tietävät mitä tiedostoa luetaan, ts.

2. Riippuvuudet. Koska olen sulkenut pois kaikki riippuvuudet paketista, käyttäjien on asennettava riippuvuudet paketin käyttämiseksi.

Julkaiseminen NPM: ssä

Nyt kun komponentti on asennettu oikein, se on valmis julkaistavaksi NPM: ssä. En toista täällä olevia ohjeita, koska ne ovat kauniisti katettu osoitteessa npmjs.com.

Tässä on tulos:

  • Github-koodi
  • NPM-sivu
Ota ilmainen Vue.js-esittelykurssi! Tämän 30 minuutin videotutkimuksen avulla saat selville, mikä Vue on, millaisia ​​sovelluksia voit rakentaa sen kanssa, kuinka sitä verrataan React & Angular -sovellukseen ja paljon muuta. Ilmoittautuminen ilmaiseksi!