Kuidas oma Vue.js komponenti NPM-is avaldada?

Olete teinud saidiga Vue.js ägeda komponendi, mida arvate, et teised arendajad saaksid oma projektides kasutada. Kuidas saate seda nendega jagada?

Selles artiklis näitan teile, kuidas oma komponenti ette valmistada nii, et seda saaks pakendada ja avaldada NPM-is. Kasutan näidisprojekti ja demonstreerin järgmist:

  • Tagamaks, et sõltuvused pole pakendis
  • Webpacki kasutamine eraldi versioonide loomiseks brauserile ja sõlmele
  • Brauseri jaoks pistikprogrammi loomine
  • Paketi.jsoni oluline konfiguratsioon
  • Avaldamine NPM-is
Märkus: see artikkel postitati algselt siia Vue.js arendajate ajaveebi 2017/07/31

Juhtumianalüüsi projekt: Vue Clock

Olen loonud selle lihtsa kellakomponendi, mille avaldan NPM-is. Võib-olla pole see kõige lahedam komponent, mida olete kunagi näinud, kuid see on tutvustamiseks piisavalt hea.

Siin on komponentfail. Siin pole midagi erilist, kuid pange tähele, et impordin aja vormindamiseks hetkekogu. Oluline on välistada sõltuvused teie paketist, mida vaatame varsti.

Peamine tööriist: Webpack

Enamik selle komponendi NPM-i ettevalmistamiseks vajalikest toimingutest tehakse Webpacki abil. Siin on Webpacki põhiseadistused, millele selle artikli lisan. See ei tohiks sisaldada palju üllatusi, kui olete Vue ja Webpacki juba varem kasutanud:

Välised

Väline konfiguratsioonivõimalus võimaldab Webpacki väljundkimbust sõltuvusi välistada. Ma ei taha, et minu pakett sisaldaks sõltuvusi, kuna need suurendavad selle suurust ja võivad kasutajakeskkonnas põhjustada versioonikonflikte. Kasutaja peab sõltuvused ise installima.

Juhtumianalüüsi projekti puhul kasutan sõltuvusena hetkekogu. Tagamaks, et seda ei pakita minu paketti, määratlen selle oma Webpacki konfiguratsioonis välisena:

Keskkond ehitab

Vue.js-s on kaks erinevat keskkonda, kus kasutaja võib soovida komponendi installida. Esiteks brauser nt.

Teiseks, Node.js-põhised arenduskeskkonnad nt.

Ideaalis soovin, et kasutajad saaksid kasutada Vue Clock'i ​​mõlemas keskkonnas. Kahjuks vajavad need keskkonnad koodi erinevat komplekteerimist, mis tähendab, et pean seadistama kaks erinevat versiooni.

Selleks loon kaks eraldi Webpacki konfiguratsiooni. See on lihtsam kui tundub, kuna konfiguratsioonid on peaaegu identsed. Esmalt loon ühise konfiguratsiooniobjekti ja seejärel lisan selle mõlemasse keskkonnakonfiguratsiooni Webpack-merge abil:

Üldine konfiguratsioon on täpselt selline, nagu see oli varem (ruumi kokkuhoiuks olen seda enamasti lühendanud), välja arvatud see, et olen eemaldanud kirjete sisestuse ja väljundi.faili nime suvandid. Täpsustan need eraldi eraldi ehituse konfiguratsioonides.

Brauseri kimp

Brauserid ei saa JavaScripti mooduleid teisest failist importida samamoodi kui sõlme. Nad saavad kasutada skriptilaadijat nagu AMD, kuid maksimaalse lihtsuse huvides tahan lubada, et minu komponendi skripti lisatakse lihtsalt globaalse muutujana.

Samuti ei taha ma, et kasutaja peaks komponendi kasutamise välja mõtlemiseks liiga kõvasti mõtlema. Teen seda nii, et seda komponenti saab hõlpsasti globaalse komponendina registreerida, kui kasutaja lisab skripti. Siin aitab Vue pistikprogramm.

Minu eesmärk on järgmine lihtne seadistamine:

Sisse panema

Esiteks loon komponendi hõlpsa installimise jaoks pistikprogrammi ümbrise:

See pistikprogramm registreerib komponendi ülemaailmselt, nii et kasutaja saab kellakomponendi helistada ükskõik kuhu oma rakenduses.

Veebipaketi konfiguratsioon

Kasutan nüüd pistikfaili brauseri loomise sisenemispunktina. Väljun failina nimega vue-clock.min.js, kuna see on kasutajale kõige ilmsem.

Eksportimine raamatukoguna

Webpack saab teie komplekteeritud skripti paljastada mitmel erineval viisil, nt. AMD või CommonJS moodulina, objektina, globaalse muutujana jne. Selle saab täpsustada suvandiga libraryTarget.

Brauseri komplekti jaoks kasutan akna sihtmärki. Võiksin suurema paindlikkuse jaoks kasutada ka UMD-d, kuid kuna ma loon juba kaks komplekti, piirdun selle kimbu kasutamisega brauseris.

Samuti määratlen teegi nime kui „VueClock”. See tähendab, et kui brauser sisaldab paketti, siis on see saadaval globaalse aknana.VueClock.

Sõlmede kimp

Lubamaks kasutajatel kasutada komponenti sõlmepõhises arenduskeskkonnas, kasutan sõlmepaketi jaoks UMD-teegi sihtmärki. UMD on paindlik moodulitüüp, mis võimaldab koodi kasutada paljudes erinevates skriptilaadijates ja keskkondades.

Pange tähele, et sõlmekomplekt kasutab sisendpunktina ühe faili komponenti ja ei kasuta pistikprogrammide ümbrist, kuna seda pole vaja. See võimaldab paindlikumat paigaldamist:

pakett.json

Enne NPM-is avaldamist seadistan oma faili package.json. Iga valiku üksikasjalik kirjeldus on saadaval saidil npmjs.com.

Olen sellest failist suuremat osa lühendanud, kuid olulised märkused on järgmised:

  1. Peamine skriptifail, s.o "main": "dist / vue-clock.js". See osutab sõlme kimbu failile, tagades, et moodulite laadurid teavad, millist faili lugeda, s.o.

2. Sõltuvused. Kuna olen pakendist igasugused sõltuvused välistanud, peavad kasutajad paketi kasutamiseks installima sõltuvused.

Avaldamine NPM-is

Nüüd, kui minu komponent on õigesti seadistatud, on see valmis avaldamiseks NPM-is. Ma ei korda siin juhiseid, kuna need on kenasti lehel npmjs.com kaetud.

Siin on tulemus:

  • Githubi kood
  • NPM leht
Võtke tasuta sisse Vue.js sissejuhatav kursus! Sellest 30-minutilisest videotutvustusest saate teada, mis on Vue, milliseid rakendusi saate sellega luua, kuidas seda võrrelda React & Angulariga ja palju muud. Registreeruge tasuta!