Kafli 24: NPM og almenn tæki og tól

npm er pakkastjóri (package manager) fyrir JavaScript en leyfir okkur líka að setja upp og nota allskonar tól sem byggð eru með JavaScript.

Pakkastjóri sér um að sjálfvirknivæða það að setja upp, stilla og fjarlægja hugbúnað. Í staðinn fyrir að þurfa að sækja einhvern hugbúnað, finna hvert við sóttum hann, keyra eitthvað uppsetningarforrit og síðan keyra forritið, þá keyrum við eina skipun og höfum aðgang að forriti.

npm er sett upp með node.js og þurfum við því að setja það upp, en hægt er að nálgast nýjustu útgáfu af node.js á vef þess. Það koma reglulega upp tilvikt þar sem við þurfum að hafa fleiri en eina útgáfu af node.js aðgengilega, þá getum við notað nvm (mac og linux) eða nvm-windows

Eftir að hafa sett upp node.js getum við opnað terminal og staðfest að við höfum aðgang að báðu:

Með node.js og npm uppsett getum við sótt okkur tæki og tól til þess að auðvelda líf okkar í vefforritun. Það eru tvær aðferðir til þess:

Með því að setja upp almennt tól getum við notað það hvar sem er gegnum terminal. browser-sync er dæmi um svona tól, en það leyfir okkur að keyra lítinn vefþjón á okkar eigin vél og sjálfkrafa endurhlaða síðu þegar við gerum breytingar sem getur sparað okkur ófáa smellina.

Byrjum á því að setja upp browser-sync almennt með npm með því að nota -g flaggið sem stendur fyrir „global“.

Ef við förum nú í möppu þar sem við höfum index.html og styles.css skjal getum við kveikt á browser-sync vefþjóninum með:

nú fylgist browser-sync með index.html og styles.css og sjálfkrafa endurhleður síðuna. En núna erum við búin að setja upp þetta tól og getum notað fyrir einhver verkefni, en hvað ef við viljum leyfa öðrum í teyminu okkar að njóta þess sama?

Með því að innifela tólin sem við notum við þróun á verkefni í verkefninu sjálfu erum við nákvæm um hver dependency okkar eru. Ef aðrir (þar með talið við sjálf eftir einhvern) koma að verkefninu viljum við að allt sé skýrt, hvaða tól sé verið að nota og hvernig. npm getur hjálpað okkur með þetta.

Ef við förum í möppuna þar sem verkefnið okkar er geymt og keyrum npm init skipunina sem spyr npm okkur um uplýsingar varðandi verkefnið okkar. Þær eru síðan geymdar í package.json skrá. Við getum síðan bætt sérstaklega við dependency á ákveðin tól, t.d. browser-sync með því að nota npm install <pakki> --save-dev en það segir npm að vista vísun í browser-sync í package.json þar sem browser-sync er development dependency. Ef við tilgreinum --save erum við að segja að pakkinn sé keyrslu dependency, þ.e.a.s. til að verkefnið keyri þarf þessi pakki að vera til.

þá lítur package.json einhvern vegin svona út:

en hún er geymd á json formi sem er gagnaform sem á rætur sínar að rekja til JavaScript. Að auki package.json verður til package-lock.json sem geymir nákvæmar útgáfur þeirra forrita sem við treystum á, því þau sjálf hafa sín eigin dependency. ./node_modules er síðan mappa sem verður til samhliða þessum skrám og geymir hún forritakóða fyrir alla pakka sem við höfum sett upp. Þessi mappa er útbúin út frá package.json og package-lock.json og þarf því ekki að geyma hana eða senda með sérstaklega. Við einfaldlega keyrum npm install og npm sér um að sækja allt sem sækja þarf.

En hvernig keyrum við þá browser-sync?

npm býður upp á leið til þess að skilgreina skriptur sem við getum keyrt með npm run <nafn-á-skriptu>. Við skilgreinum þessar skriptur undir "scripts" hlutanum í package.json, ef við bætum við skriptu til að keyra browser-sync við dæmið að ofan fáum við:

sérstaklega þarf að passa upp á að hafa , á eftir hverri skriptu ef önnur fylgir og enga kommu í lokin.

Við getum þá keyrt browser-sync í verkefninu okkar með:

og fengið sömu virkni og áður en núna tekur verkefnið okkar skýrt fram að það noti browser-sync.

Með sass kemur CLI forrit sem við getum keyrt og gefið slóð á .scss skrár og nafn á .css skrá og er þá sass þýtt yfir í CSS skrá. -w flag lætur forritið vakta skránna okkar og þýða hana aftur ef .scss skrár breytast.

Núna lendum við í því að hafa tvö tól sem við viljum keyra á sama tíma, við því eru tvær lausnir:

Eitt svona tól er concurrently er einn af mörgum pökkum sem leyfir okkur að keyra margar skipanir í einu. Ef við setjum það upp og keyrum:

og bætum við skriptum

og þá getum við keyrt bæði tólin okkar í einu með:

Það er venja að hafa skriptu sem heitir eitthvað í áttina að dev (fyrir development) til að keyra þróunartól í gang. Ef við bætum við skriptu sem heitir start er búist við að hún keyri upp raunkeyrslu útgáfu (e. production) af verkefninu. Þá er líka hægt að nota beint npm start.

Seinasta CSS þróunartólið sem við setjum upp er stylelint en eins og nafnið gefur til kynna er það linter fyrir CSS (og fleiri mál, t.d. Sass). Því fylgja margar reglur sem hægt er að sér sníða fyrir hvert og eitt verkefni, eða fá ákveðnar best practices reglur með, t.d. stylelint-config-primer sem inniheldur grunnreglur og styður sass.

Til þess að kveikja á stylelint-config-primer reglunum þurfum við að búa til .stylelintrc skrá (skrár sem byrja á . eru oft notaðar til að geyma stillingar, en þær geta líka valdið vandræðum þar sem mörg stýrikerfi fela þær) sem inniheldur:

og bætum við skriptu sem keyrir tólið:

Ef við núna skrifum sass/css sem ekki er talið gott samkvæmt reglunum sem við höfum valið okkur:

og keyrum lint til að athuga (-s stendur fyrir silent, en þá sleppir npm að sýna upplýsingar um keyrslu)

Þegar við vinnum í verkefnum í teymi, þar sem ákveðnar reglur um kóðastíl hafa verið skilgreindar förum við eftir þeim til að halda samræmi. Við erum e.t.v. ekki alltaf sammála reglunum, en við treystum því að það séu góðar ástæður þar að baki, eða ræðum við teymið okkar um að breyta þeim.

Allar reglur sem hægt er að stilla í Stylelint má nálgast á vefnum. Ef við viljum breyta því hvernig regla virkar getum við stillt hana sérstaklega í .stylelintrc, t.d. banna tómar athugasemdir:

Það geta þó komið upp aðstæður þar sem við viljandi brjótum almenna reglu fyrir sértækt tilvik. T.d. viljum við setja letur á html en Stylelint vill ekki að við notum type-selector. Við getum þá slökkt á athugun á þeirri línu með /* stylelint-disable-line */ (einnig hægt að slökkva á fleiri vegu).