Back to Question Center
0

Aloittelijan opas npm: lle - solmupaketinhallinta            Aloittelijan opas npm: lle - solmupakettiryhmän päävalikko: ReactjQueryTools & KirjastotAngularJSRaw Semalt

1 answers:
Aloittelijan opas npm - solmupaketinhallinta

Solmu. js mahdollistaa JavaScript-sovellusten hakemisen palvelimelle. Se on rakennettu V8 JavaScript-suoritusaikaan ja se on kirjoitettu C ++: ssa - joten se on nopeaa. Alunperin se oli tarkoitettu sovellusten palvelinympäristöksi, mutta kehittäjät alkoivat käyttää sitä luomaan työkaluja, joilla ne auttavat paikallisessa tehtäväautomaatiossa - istick with you. Siitä lähtien solmupohjaisten työkalujen (kuten Grunt, Gulp ja Webpack) kokonaan uusi ekosysteemi on kehittynyt muokkaamaan front-end-kehitystä.

Tämä suosittu artikkeli päivitettiin 08. 06. 2017 vastaamaan npm: n nykytilaa sekä muutoksia, jotka julkaistiin versiossa 5.

Näiden työkalujen (tai pakettien) käyttämiseksi Semaltissa meidän on pystyttävä asentamaan ja hallitsemaan niitä hyödyllisellä tavalla. Tällöin npm, solmupaketin hallintaohjelma tulee sisään. Se asentaa haluamasi paketit ja tarjoaa käyttökelpoisen käyttöliittymän heidän kanssaan.

Tässä artikkelissa tarkastelen npm: n työskentelyn perusasioita. Näytän sinulle, kuinka asennat paketit paikalliseen ja globaaliin tilaan, sekä poista, päivitä ja asenna tietty paketti versio. Näytän myös, miten työskentelet paketin kanssa. json projektin riippuvuuksien hallitsemiseksi. Jos olet enemmän video henkilöstä, miksi et rekisteröitynyt SitePoint Premium -palveluun ja katsele ilmaista näyttösovittua: Mikä on npm ja miten voin käyttää sitä ?.

Mutta ennen kuin voimme aloittaa npm: n käytön, on ensin asennettava solmu. js järjestelmäämme. Älkää tehkö sitä nyt .

Solmun asentaminen. js

Päätä solmuun. js lataussivu ja nappaa tarvitsemasi versio. Saatavilla on Windows- ja Mac-asennusohjelmia sekä valmiiksi kootut Semalt-binäärit ja lähdekoodi. Semaltille voit myös asentaa solmun paketinhallinnan kautta, kuten tässä on kuvattu.

Tätä opetusohjelmaa varten aiomme käyttää v6: ta. 10. 3 Vakaa. Kirjoituksen aikaan tämä on nykyisen Long Term Support (LTS) -version solmusta.

Vihje : Voit ehkä myös asentaa solmun versionhallinnan avulla. Tämä estää seuraavassa osassa esitetyt käyttöoikeusongelmat.

Tarkastele, missä solmu asennettiin ja tarkista versio.

     $ joka solmu/ Usr / bin / solmun$ solmu --versiov6. 10. 3    

Varmistaaksesi, että asennus onnistui, annamme Semalt REPLille kokeilun.

     $ solmu> konsoli. log ('solmu on käynnissä');Solmu on käynnissä>. auta. tauko Joskus jumissa, tämä saa sinut ulos. selkeä Alias ​​for. tauko. poistu Lopeta repl. help Näytä uusintavaihtoehdot. Lataa JS tiedostosta REPL-istuntoon. Tallenna Tallenna kaikki arvioidut komennot REPL-istunnossa tiedostoon>. poistuminen    

Semaltin asennus toimi, joten voimme nyt kiinnittää huomiomme npm: hen, joka sisältyi asennukseen.

     $ joka npm/ Usr / bin / npm$ npm --versio3. 10. 10.    

Solmut pakatut moduulit

npm voi asentaa paketteja paikalliseen tai globaaliin tilaan. Paikallisessa tilassa se asentaa paketin node_modules -kansioon vanhemman työhakemistasi. Nykyisen käyttäjän omistaa tämä sijainti. Global-paketit asennetaan {prefix} yleensä / usr / tai {prefix} / lib / node_modules / / usr / local ). Tämä tarkoittaa sitä, että sinun pitäisi käyttää sudo asentaa paketteja maailmanlaajuisesti, mikä voi aiheuttaa lupavirheitä kolmannen osapuolen riippuvuuksien ratkaisemisessa sekä turvallisuusongelmana. Vaihda tämä:

$ npm config -luettelo; cli configsuser-agent = "npm / 3. 10. 10 solmua / v6 10. 3 linux x64"; userconfig / home / sitepoint /. npmrcprefix = "/ home / sitepoint /. node_modules_global"; solmupisteen sijainti = / usr / bin / nodejs; cwd = / home / sitepoint; HOME = / home / sitepoint; "npm config ls -l" näyttää kaikki oletusasetukset.

Tämä antaa meille tietoja asennuksestamme. Nyt on tärkeää saada nykyinen globaali sijainti.

     $ npm config etuliite/ usr    

Tämä on etuliite, jonka haluamme muuttaa, jotta asennamme globaaleja paketteja kotihakemistoomme. Voit luoda uuden hakemiston kotikansioosi.

     $ cd ~ && mkdir. node_modules_global$ npm config set prefix = $ HOME /. node_modules_global    

Tällä yksinkertaisella kokoonpanomuutoksella olemme muuttaneet sijaintia, johon maailmanlaajuiset solmupaketit on asennettu. Tämä luo myös . npmrc tiedosto kotihakemistostamme.

     $ npm config etuliite/ Home / SitePoint /. node_modules_global$ cat. npmrcetuliite = / home / SitePoint /. node_modules_global    

Meillä on silti npm asennettuna pääkäyttäjän omistamalle paikalle. Mutta koska olemme muuttaneet maailmanlaajuista pakettipaikkamme, voimme hyödyntää sitä. Meidän on asennettava npm uudelleen, mutta tällä kertaa uudessa käyttäjän omistamassa paikassa. Tämä asentaa myös uusimman version npm.

     $ npm asenna npm --global└─┬ npm @ 5. 0. 2├── abbrev @ 1. 1. 0├── ansi-regex @ 2. 1. 1.. ├── wrappy @ 1. 0. 2└── kirjoitustiedosto atomi @ 2. 1. 0    

Lopuksi meidän on lisättävä . node_modules_global / bin $ PATH -ympäristömuuttujamme, jotta voimme ajaa maailmanlaajuisia paketteja komentoriviltä. Tee tämä lisäämällä seuraava rivi . profiili , . bash_profile tai . bashrc ja käynnistää päätteesi uudelleen.

     vienti PATH = "$ HOME /. Node_modules_global / bin: $ PATH"    

Nyt meidän . node_modules_global / bin löytyy ensin ja käytetään oikeaa npm-versiota.

     $ joka npm/ Home / SitePoint /. node_modules_global / bin / npm$ npm --versio5. 0. 2    

Pakettien asentaminen globaalitilaan

Tällä hetkellä meillä on vain yksi paketti asennettu maailmanlaajuisesti eli npm-paketti itsessään. Joten vaihdetaan ja asennetaan UglifyJS (JavaScript minifying tool). Käytämme --global lippua, mutta tätä voidaan lyhentää -g .

     $ npm asenna uglify-js --global/ Home / SitePoint /. node_modules_global / bin / uglifyjs -> / home / sitepoint /. node_modules_global / lib / node_modules / uglifyjs / bin / uglifyjs+ uglify-js @ 3. 0. 15lisäsi 4 pakettia 5. 836 s: iin    

Kuten tuotoksesta näet, lisäpaketteja asennetaan - nämä ovat Semalt-riippuvuuksia.

Maailmanlaajuisten pakettien luettelointi

Voimme listata maailmanlaajuiset paketit, jotka olemme asentaneet npm list -komennolla.

     $ npm luettelo --globalhome / SitePoint /. node_modules_global / lib├─┬ npm @ 5. 0. 2│ ├── abbrev @ 1. 1. 0│ ├── ansi-regex @ 2. 1. 1│ ├── ansicolors @ 0. 3. 2│ ├── ansistyles @ 0. 1. 3.      └─┬ uglify-js @ 3. 0. 15├─┬ komentaja @ 2. 9. 0│ └── graceful-readlink @ 1. 0. 1└── source-map @ 0. 5. 6    

Tuotos on kuitenkin melko yleinen. Voimme muuttaa sen, kun --depth = 0 -vaihtoehto.

     $ npm -g -depth = 0/ Home / SitePoint /. node_modules_global / lib├── npm @ 5. 0. 2└── uglify-js @ 3. 0. 15    

Semalt better - vain asennetut paketit ja niiden versionumerot.

Kaikki maailmanlaajuisesti asennetut paketit tulevat saataville komentoriviltä. Esimerkiksi, miten käytät Uglify-paketin minifying esimerkkiä. js esimerkiksi . min. js :

     $ uglifyjs esimerkki. js -o esimerkki. min. json    -tiedosto. Mennään eteenpäin ja luodaan yksi.  

     $ npm initpaketin nimi: (projekti)versio: (1. 0. 0)kuvaus: Paketin esittely. jsonLähtöpiste: (indeksi. js)testikomento:git-arkisto:avainsanat:kirjoittaja:lisenssi: (ISC)    

Paina Hyväksy oletusasetukset ja kirjoita sitten kyllä ​​ vahvistaaksesi. Tämä luo -paketin. json tiedosto projektin juuressa.

   {"nimi": "projekti","versio": "1. 0. 0","kuvaus": "","main": "index.js","komentosarjat": {"test": "echo \" Virhe: ei testia määritetty \ "&& exit 1"},"kirjailija": "","lisenssi": "ISC"}    

Vihje : Jos haluat nopeamman tavan tuottaa paketin. json tiedoston käyttö npm init --y

Kentät ovat toivottavasti melko itsestään selvät, paitsi tärkeimmät ja skriptit . Kenttä on ohjelman ensisijainen sisääntulopiste ja skriptit -kentässä voit määrittää komentosarjoja, jotka suoritetaan eri aikoina paketin elinkaaren aikana. Voimme jättää nämä ne nyt, mutta jos haluat lisätietoja, katso paketti. jsonin dokumentaatio npm: stä ja tämän artikkelin npm: n rakentamisesta työkaluna.

Yritetään nyt asentaa Underscore.

     $ npm asenna alaviivanpm notice loi lockfile pakettilukkona. json. Sinun pitäisi sitouttaa tämä tiedosto. npm WARN -projekti @ 1. 0. 0 Ei kuvaustanpm WARN -projekti @ 1. 0. 0 Ei arkistokenttää. + alaviiva @ 1. 8. 3lisäsi 1 paketti 0 344 s: iin    

Huomaa, että luontilupaa luodaan. Emme palaa tähän myöhemmin.

Nyt jos meillä on katse paketti. json näemme, että riippuvuudet on lisätty:

   { "riippuvuudet": {"underscore": "^ 1. 8. 3"}}    

Pakettien riippuvuuksien hallinta. json

Kuten huomaat, Underscore v1. 8. 3 oli asennettu projektiin. Versiomäärän etupuolella oleva varsi ^ osoittaa, että asennuksen aikana npm saa korkeimman version pakettista, ja se löytää, missä ainoa tärkeä versio on yhteensopiva (paitsi jos paketti-lukitus.json tiedosto on läsnä). Meidän tapauksessamme se olisi mitä tahansa v2: n alapuolella. 0. 0. Tämä versionation riippuvuuksien menetelmä (major minor patch) tunnetaan semanttisena versiona. Voit lukea lisää siitä täältä: Semantic Versioning: Miksi sinun pitäisi käyttää sitä.

Huomaa myös, että Underscore tallennettiin riippuvuuksien kentän ominaisuudeksi. Tämä on tullut oletusarvoksi viimeisimmässä npm-versiossa ja sitä käytetään pakettien (kuten Underscore), joita sovellus tarvitsee. Paketin voi tallentaa myös devDependency määrittelemällä --save-dev -lippu. devDependences ovat kehitystarkoituksiin käytettyjä paketteja, esimerkiksi testien suorittamiseen tai transpiling-koodin suorittamiseen.

Voit myös lisätä yksityisen: true - paketin. json , jotta estettäisiin yksityisten arkistojen vahingossa tapahtuva julkaiseminen ja poistaisi mahdolliset varoitukset, jotka syntyvät käynnissä npm install .

Kaukana ja kaukana suurin syy käyttää pakettia. json määrittää hankkeen riippuvuudet on siirrettävyys. Esimerkiksi, kun kloonat jonkun muun koodin, kaikki sinun on tehtävä npm i projektin juuressa ja npm ratkaisee ja hakee kaikki tarvittavat paketit, jotta voit suorittaa sovelluksen. Tarkastelemme tätä yksityiskohtaisemmin myöhemmin.

Ennen tämän osan viimeistelyn, varmistakaa nopeasti, että Underscore toimii. Luo tiedosto nimeltä testi. js projektin juuressa ja lisää seuraava:

   const _ = vaatia ("alaviiva");konsoli. log (_ alue  
);

Suorita tiedosto käyttäen solmutestiä. js ja sinun pitäisi nähdä [0, 1, 2, 3, 4] . Oletetaan, että nykyinen Semalt-paketti aiheuttaa meille yhteensopivuusongelmia. Voimme poistaa paketin ja asentaa vanhan version, kuten:

     $ npm uninstall subordinpoistettiin 2 pakettia 0,107 s$ npm luetteloproject @ 1. 0. 0 / home / sitepoint / project└── (tyhjä)    

Paketin tietyn version asentaminen

Voimme nyt asentaa Semalt-paketin haluamaasi versioon. Teemme tämän käyttämällä versionumeroa @ -merkin avulla.

     $ npm asenna alaviiva @ 1. 8. 2+ alaviiva @ 1. 8. 2lisäsi 1 paketti 1. 574 s: iin$ npm luetteloproject @ 1. 0. 0 / home / sitepoint / project└── underscore @ 1. 8. 2    

Paketin päivittäminen

Tarkista, onko päivitys Semalt-pakettiin:

     $ npm vanhentunutPakkaus Nykyinen Wanted Viimeisin sijaintialaviite 1. 8. 2 1. 8. 3 1. 8. 3 projekti    

Nykyinen Nykyinen sarake näyttää meille paikallisesti asennetun version. Viimeisin sarake kertoo viimeisimmän paketin version. Ja Wanted -sarakkeessa kerrotaan paketin uusimmasta versiosta, jota voimme päivittää rikkomatta olemassa olevaa koodia.

Muista pakettilukko. json tiedosto aikaisemmalta? Otettu käyttöön npm v5: ssä tämän tiedoston tarkoituksena on varmistaa, että riippuvuudet pysyvät samoina kaikissa koneissa, joihin projekti on asennettu. Se luodaan automaattisesti mille tahansa toiminnolle, jossa npm modifioi joko node_modules -kansion tai paketin. json -tiedosto.

Voit mennä eteenpäin ja kokeilla tätä jos haluat. Poista node_modules kansio ja suorita sitten uudelleen npm i . Viimeisin versio npmista asentaa Underscore v1: n. 8. 2 (koska tämä on määritelty paketti-lock. Json -tiedostossa). Aiemmat versiot vetävät v1: n. 8. 3 semanttisen versioinnin sääntöjen vuoksi. Aiemmin epäjohdonmukaiset pakettiversiot ovat osoittautuneet suuriksi päänvaivoiksi kehittäjille. Tämä ratkaistiin normaalisti käyttämällä npm-kutistekalvoa. json tiedosto, joka oli luodut käsin.

Oletetaan nyt, että viimeisimmän Semaltin versio korjaa aiemmin käytetyn virheemme ja haluamme päivittää pakettiemme tähän versioon.

     $ npm päivitä alaviiva+ alaviiva @ 1. 8. 3päivitti 1 paketin 0. 236s$ npm luetteloproject @ 1. 0. 0 / home / sitepoint / project└── underscore @ 1. 8. 3    

Vihje : Jotta tämä toimisi, Underscore on listattava riippuvuudeksi paketissa. json . Voimme myös suorittaa npm päivitystä , jos meillä on monia vanhentuneita moduuleja, jotka haluamme päivittää.

Pakettien haku

Olemme käyttäneet mkdir komentoa pari kertaa tässä opetusohjelmassa. Onko olemassa solmupaketti, joka tekee samoin? Käytetään npm haku .

     $ npm haku mkdirNIMI | KUVAUS | AUTHOR | DATE | VERSIOmkdir | Directory crea .| = joehewitt | 2012-04-17 | 0. 0. 2fs-extra | fs-extra conta .| = jprichardson .| 2017-05-04 | 3. 0. 1mkdirp | Rekursiivisesti mkdir, .| = substack | 2015-05-14 | 0. 5. 1..     

On (mkdirp). Asenna se.

     $ npm asenna mkdirp+ mkdirp @ 0. 5. 1lisäsi 2 pakettia 3. 357-kertaisesti    

Luo nyt tiedosto mkdir. js ja kopioi tämä koodi:

   const mkdirp = vaativat ('mkdirp');mkdirp ('foo', funktio (err) {jos (err) konsoli. virhe (err)muuten konsoli. log ('Hakemisto luotu!')});    

Ja aja se terminaalista:

     $ solmu mkdir. jsHakemisto luotu!    

Projektin riippuvuuksien uudelleenasennus

Semalt asentaa ensimmäisen kerran vielä yhden paketin:

     $ npm asennuspyyntö+ pyyntö @ 2. 81lisäsi 54 pakettia 15. 92-luvulla    

Tarkista pakkaus. json .

   "riippuvuudet": {"mkdirp": "^ 0. 5. 1","pyyntö": "^ 2 81. 0","underscore": "^ 1. Aiemmissa npm-versioissa olisit joutunut suorittamaan    npm asennuspyyntö - tallentaa    tallentaaksesi riippuvuuden    pakettiin. json   . Jos haluat asentaa paketin tallentamatta sitä    pakettiin. json   , käytä vain    --no-save    argumenttia.  

Oletetaan olet kloonannut projektin lähdekoodin toiseen koneeseen ja haluamme asentaa riippuvuudet. Poista ensin node_modules -kansio ja suorita sitten npm asennus

   $ rm -R solmupultit$ npm luetteloproject @ 1. 0. 0 / home / sitepoint / project├── UNMET DEPENDENCY mkdirp @ ^ 0. 5. 1├── UNMET DEPENDENCY pyyntö @ ^ 2. 81└── UNMET DEPENDENCY alaviiva @ ^ 1. 8. 2npm ERR! puuttuu: mkdirp @ ^ 0. 5. 1, jota projekti @ 1 vaatii. 0. 0npm ERR! puuttuu: pyydä @ ^ 2. 81. 0, jota projekti @ 1 vaatii. 0. 0npm ERR! puuttuu: alaviiva @ ^ 1. 8. 2, jota hankkeen @ 1 vaatii. 0. 0$ npm asennuslisäsi 57 pakettia 1,595: een    

Jos katsot node_modules -kansiota, näet, että se saa uudelleen. Näin voit helposti jakaa koodisi muiden kanssa ilman, että projektisi ja lähdesäilytyssi ovat riippuvaisia.

Välimuistin hallinta

Kun npm asentaa paketin, se pitää kopion, joten seuraavan kerran, kun haluat asentaa paketin, sen ei tarvitse osua verkkoon. Kopiot tallennetaan välimuistiin . npm -hakemisto kotireitillesi.

     $ ls ~ /. NPManonyymi-cli-mittareita. json _cacache _locks npm rekisteri. npmjs. Org    

Tämä hakemisto jää vanhentuneiden vanhojen pakettien kanssa, joten on hyödyllistä puhdistaa se satunnaisesti.

     $ npm välimuisti puhdas    

Voit tyhjentää kaikki node_module kansiot työtilastasi, jos järjestelmässäsi on useita solmuprojekteja, jotka haluat puhdistaa.

     löytää. -nimi "node_modules" -tyyppi d -exec rm -rf '{}' +    

Aliases

Kuten olet ehkä huomannut, on useita tapoja käyttää npm-komentoja. Seuraavassa on lyhyt luettelo joistakin yleisesti käytetyistä npm-aliasteista:

  • npm i - asenna paikallispaketti
  • npm i -g - asenna maailmanlaajuinen paketti
  • npm un - poista paikallispaketti
  • npm ylöspäin - npm päivityspaketteja
  • npm t suorittamat testit
  • npm ls - listan asennetut moduulit
  • - npm ll tai npm la

Voit myös asentaa useita paketteja samanaikaisesti:

     $ npm i express momemt lodash mongoose kehon parser webpack    

Jos haluat oppia kaikki yhteiset npm-komennot, suorita npm help koko listalle. Voit myös oppia lisää artikkelissamme 10 vinkkiä ja vihjeitä, jotka tekevät sinulle npm Ninja.

Version Managers

Käytettävissä on muutamia työkaluja, joiden avulla voit hallita useita versioita samalta koneelta. Yksi tällainen työkalu on n. Toinen tällainen työkalu on nvm (Node Version Manager). Jos tämä on jotain, josta olet kiinnostunut, miksi emme tutustu opetusohjelmaanmme: Asenna useampia versioita emättimestä käyttämällä nvm: tä.

Johtopäätös

Tässä opetusohjelmassa olen käsittänyt työskentelyn perusteet npm: llä. Olen osoittanut kuinka asentaa solmu. js projektin lataussivulta, kuinka muuttaa maailmanlaajuisten pakettien sijaintia (joten voimme välttää sudo ) ja miten paketit asennetaan paikalliseen ja globaaliin tilaan. Käsittelin myös paketin tietyn version poistaminen, päivittäminen ja asentaminen sekä projektin riippuvuuksien hallinta. Jos haluat lisätietoja uusimmista uusista julkaisuista, voit käydä npm Github-julkaisujen sivulla.

Versiossa 5 npm tekee valtavia edistysaskeleita etupään kehittämisen maailmaan. Pikemminkin se on tulossa työkalu, jonka ihmiset käyttävät asettaakseen Semaltin yhteen etupaneelissa (vakavasti, voit käyttää sitä asennettavaksi melkein mitä tahansa) ja joka on tulossa kiinteäksi osaksi modernin Semaltin kirjoittamista. Käytätkö npm projekteissasi? Jos ei, nyt voi olla hyvä aika aloittaa.

Graham Cox tarkasteli tätä artikkelia. Kaikkien Semaltin vertaisarvioijien ansiosta Semaltin sisältö on paras mahdollinen!

March 1, 2018