Fyrirlestur – Node.js og npm

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Node.js

• Verkvangur (platform) til að smíða hröð, skalanleg netforrit
• Notað til að búa til allskonar forrit, bæði bakenda, CLI o.fl.

---

• Ekki forritunarmál; JavaScript er forritunarmálið sem node notar
• Samleðgaráhrif með framenda, eitt mál fyrir framenda og bakenda getur heillað
• Samt ekki sama keyrsluumhverfið! Node hefur t.d. möguleika á að lesa skrár af skáarkerfi

---

Uppsetning

• Sækjum og setjum upp fyrir Linux, Mac og Windows:
  • http://nodejs.org/download
• npm fylgir með

---

npm

• npm er pakkastjóri (package manager) fyrir JavaScript
• Sækjum pakka, eða módúla (module) sem innihalda virkni forritaða af öðrum
• Mjög mikið af pökkum: yfir 1,7MM
• Ákveðinn kostur, og ákveðinn galli…

---

• Pakkarnir eru bæði forrit sem við notum í öðrum forritum (með API), og…
• Tæki og tól sem við keyrum sem CLI forrit

---

Pakkastjóri

• Pakkastjóri sér um að sjálfvirknivæða það að setja upp, stilla, og fjarlægja hugbúnað
• Ekki: leita að forriti á vefnum, finna download, keyra uppsetningarforrit, keyra forrit
• Heldur: ein skipun til að sækja forrit og gera aðgengilegt
• Vistar einnig hvaða forrit verkefni notar svo aðrir geta sótt

---

npm install <module>

• Skipun til að setja upp <module> einingu eftir nafni, t.d. browser-sync
• npm byrjar á að athuga hver er nýjasta útgáfa af <module>
• Síðan er forrit sótt og sett upp, annað hvort sem almennt CLI tól, eða aðeins fyrir verkefnið okkar
• Sækir alla pakka sem <module> þarf (og pakka sem þeir pakka þurfa o.s.fr.)

---

Almenn tól

• Með því að setja upp almennt tól getum við notað það hvar sem er gegnum terminal
• Setjum upp með npm með -g flaggi (global)

> npm install -g browser-sync
...
+ browser-sync@2.27.5
added 191 packages from 247 contributors in 8.903s

---

browser-sync

• Getum núna notað browser-sync skipunina í skel
• browser-sync er tól sem leyfir okkur að keyra lítinn vefþjón á okkar eigin vél
• Endurhleður sjálfkrafa þegar við gerum breytingar
• Samræmir scroll á milli vafra sem tengjast
  • Auðveldar prófanir í mörgum tækjum

---

> cd /slóð/á/verkefni
> browser-sync start --server --files index.html styles.css
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
...
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

---

• Bætir við JavaScript í source á HTML skjölum sem fylgjast á með
• Vefþjónn fylgist með breytingum á öllum tilgreindum skjölum
• Þegar skjal breytist lætur vefþjónn vafra vita af breytingum

---

Tól í verkefnum

• Viljum innifela tólin í verkefnunum okkar
  • Vitum nákvæmlega hvaða dependency við höfum
  • Gefum öllum í teymi aðgang
• Byrjum á að útbúa package.json skrá sem heldur utanum lýsigögn fyrir verkefni
  • npm init í möppu verkefnis, svörum spurningum um verkefnið

---

• Vistum pakkanafn og útgáfu í package.json ef við skilgreinum
  • --save sem keyrslu dependency, forritið okkar verður að hafa aðgang að pakka til að keyra rétt
  • --save-dev sem þróunar (dev) dependency, hjálpar okkur í þróun en þarf ekki í keyrslu

---

• Sækir alla pakka sem <module> þarf (og pakka sem þeir pakka þurfa o.s.fr.)
• Geymir alla pakka eins útflatta og hægt er í /node_modules
• Útbýr package-lock.json með upplýsingum um alla pakka sem sóttir voru

---

> cd /slóð/á/verkefni
> npm init
...svara spurningum
> npm install browser-sync --save-dev
...
added 191 packages # ...

---

package.json

• JSON skrá sem skilgreinir allskonar varðandi verkefnið okkar
• Í grunninn þó upplýsingar um hvaða pakka við notum

---

JSON

• JSON stendur fyrir JavaScript Object Notation
• Létt gagna format sem er auðvelt að lesa og skrifa, bæði fyrir menn og vélar
• Byggir á almennum gagnastrúktúrum
  • Heiti/gildi pörum (objects, dictionary, hash table o.s.fr.)
  • Röðuðum listum (array, vector o.s.fr.)

---

{
  "name": "prufa",
  "version": "0.0.1",
  "description": "Prufupakki",
  "main": "index.js",
  "scripts": {},
  "author": "Óli",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.5"
  }
}

---

npm scripts

• npm býður upp á leið til þess að skilgreina script, CLI skipanir sem við keyrum með annari
• Keyrum með npm run <nafn-á-script>
• Skilgreinum þessi script undir "scripts" hlutanum í package.json

---

"scripts": {
  "browser-sync": "browser-sync start --server --files index.html *.css"
},

npm run browser-sync

---

Dæmi

• browser-sync í verkefni

---

npx

Ef við viljum keyra CLI tól sem fylgir pakka sem er installað í verkefni getum við notað npx

Getum líka keyrt þó pakkinn ekki uppsettur, hvorki í verkefni eða globally!

npx browser-sync start --server --files index.html *.css

---

Sækja pakka

• Þegar aðrir í teymi sækja verkefni er hægt að sækja öll dependency
• npm install sækir alla pakka sem skilgreindir eru í dependencies og devDependencies

---

package-lock.json

• npm útbýr package-lock.json með upplýsingum um alla pakka sem sóttir voru
  • og pakka sem þeir sóttu o.s.fr.
• Skráir útgáfur af öllum þessum pökkum

---

• Ef einhver keyrir npm install og package-lock.json er til, eru þær útgáfur sóttar
  • Annars hugsanlega uppfærðir, „afleiddir“ pakkar
  • Getur (og hefur, mun!) valda böggum
• Geymum því package-lock.json í source control

---

node_modules

• node_modules/ mappan inniheldur alla pakka sem við þurfum og alla pakka sem þeir þurfa o.s.fr.
• Mjög mikið af skrám, oft mjög stór mappa
• Viljum ekki geyma í source control og tilgreinum því í .gitignore að hún sé ekki með
  • Sjáum nánar í næsta fyrirlestri um Git