Ik heb gemerkt dat we op school bij elk vak, dat hiermee ook maar enigsinds te maken heeft, keer op keer opnieuw de 'basis' herhalen en dan dikwijls van uit één specifiek standpunt. Ik zou liever hebben dat de studenten over een definitieve referentie hierover kunnen beschikken. Dus dit is een aanzet hiertoe.
De kernconcepten van npm begrijpen is voor beginners echt niet gemakkelijk. Ik zelf heb vele uren besteed aan het uitzoeken van details die door anderen als vanzelfsprekend worden beschouwd.
Doelstelling
Leren wat Node.js en npm zijn
Node.js en npm installeren op Windows en Mac
Wat is Node.js?
In het begin kon je JavaScript code laten uitvoeren in browsers. Met Node.js kan je JavaScript-code uitvoeren aan de backend, op de server, buiten een browser. Node.js maakt het dus mogelijk om applicaties in JavaScript te schrijven op de server.
Wat is npm?
Oorspronkelijk was Node.js bedoeld als een serveromgeving voor applicaties. Maar ontwikkelaars begonnen het te gebruiken om tools te maken om hen te helpen bij lokale taakautomatisering. Sindsdien is een heel nieuw ecosysteem van op Node gebaseerde tools (zoals Grunt, Gulp en Webpack) ontstaan die de front-end ontwikkeling grondig gewijzigd heeft.
Om deze tools (of pakketten) in Node.js te kunnen gebruiken, moeten we ze op een handige manier kunnen installeren en beheren. Daarvoor dient npm, de Node-pakketbeheerder (Node Package Manager). Met npm kan je de pakketten, die je wilt gebruiken, intalleren en het beschikt over een interface om met die pakketten te werken.
Sla deze stappen niet over! Als je niet weet hoe je de opdrachtregel moet gebruiken, ge ja het moeilijk hebben. Deze tutorials bevatten alleen de commando's die je nodig hebt.
Local versus global
Dit is in het begin het meest verwarrende concept om te begrijpen, dus gaan we er even dieper op in. We zijn gewend om een programma of software globaal op onze computer te installeren. Of nog beter we trekken er ons niets van aan. Als we Spotify downloaden dan verwachten we dat we het kunnen openen en gebruiken.
Met npm moet je goed weten of je een installatie globaal of lokaal wilt laten uitvoeren. Je zal waarschijnlijk een aantal globale programma's moeten installereni. Maar meestal ga je installaties willen uitvoeren lokaal, alleen voor lokale projectbasis. Dat betekent dat je alle prorgramma's die je nodig hebt voor een bepaald project in eigen lokale directory moet installeren. Als je een project met Gulp en Sass wilt laten uitvoeren, maakt je een map aan met een nieuwe npm-installatie.
Dus we onthouden dat we voor globale installaties de -g de vlag nodig hebben.
Node.js installeren
Ga naar de downloadpagina van Node.js en pak de versie die je nodig hebt. Er zijn installatieprogramma's voor Windows en Mac beschikbaar, evenals voorgecompileerde Linux-binaire bestanden en broncode. Voor Linux kan je Node ook installeren via de pakketbeheerder, zoals hier beschreven.
open het bestand in de Verkenner om Node.js en npm te installeren
Install Node.js select the way you want features to be installedInstall Node.js Tools for Native modules
Om de geïnstalleerde versie van Node na te gaan typ je in de terminal:
node --version
npm --version
Mac
Op Mac openen we de terminal om Node.js en npm te installeren.
Open het ~/.bash_profile bestand en ga na als source ~ / .bashrc daar ergens in staat.
Start de terminal opnieuw op.
Voer het installatie commando uit:
nvm install node
Voer het use commando uit:
nvm use node
om de geïnstalleerde versie van Node na te gaan typ je in de terminal:
node --version
om na te gaan waar node is geïnstalleerd op Mac:
wich node
Node rechtstreeks vanaf de terminal
Je kan Node.js in de terminal uitvoeren en van de command-prompt werken. Typ in Powershell of in de Terminal:
node
En de command-prompt verschijnt. Je kan nu gewoon JavaScript code intypen en laten uitvoeren, net zoals je dat in de developer console van de browser. Om de console te verlaten typ je Ctrl-C:
Node.js from the terminal
Een eigen project maken
Vooraleer je begint
We maken een map in je workspace met bijvoorbeeld de naam node-serieus. Die map gaan we gebruiken om met Node.js te leren werken.
Een js bestand laten uitvoeren
Je kan ook JavaScript code in een bestand saven en het bestand door Node.js laten uitvoeren.
We maken een JavaScript met de naam first-project.js met daarin:
/* je wilt de oneven getallen verdubbelen, maar de oneven negeren.
Dat kan je met devolgde constructie:
*/
let numberList = [1, 2, 3, 4, 5, 6];
let newNumberList = numberList.filter(function(number) {
return (number % 2 !== 0);
}).map(function(number) {
return number * 2;
});
console.log("The doubled numbers are", newNumberList); // [2, 6, 12]
Om de code in het bestand uitvoeren van de terminal ga je eerst naar de map waarin het bestand staat en typ je:
node first-project.js
Maak een project
Op dit punt gekomen, zijn we klaar om Gulp, Webpack, Browserify of wat je ook maar wilt gebruiken te installeren. Maar we kunnen ook een eenvoudig project maken zelf om te testen of alles werkt.
Project initialiseren
Navigeer naar de map waarin je een project wil maken - in ons geval is dat AP/programmeren5/node-serieus.
In de terminal in die map typ je:
mkdir node-first-project
En initialiseer je deze map:
cd node-first-project
npm init
Een pop-up verschijnt in de terminal en stelt een paar vragen over je project:
npm init pop-up
Zoals je kan zien hebben we nu een package.json-bestand dat alle informatie bevat die we daarnet hebben ingevoerd:
npm init package.json created
Een package.json is een bestand dat metagegevens over het project bevat en de afhankelijkheden (aanvullende software en modules) van het project beheert.
Afhankelijkheden (dependencies) installeren
We gaan op npm kijken of een pakket kunnen vinden die een tekst omzet in camelcase notatie. Typ in het zoekvak camel-case en druk op enter. We willen dit pakket gebruiken in ons project.
npm start page
Om een afhankelijkheid met npm te installeren, gebruiken we de opdracht npm install dependency-name-here. Als je alleen npm install uitvoert, wordt de afhankelijkheid gedownload, maar niet opgeslagen in het project. Aangezien we ons package.json bestand al hebben gemaakt, gebruiken we de vlag --save om de afhankelijkheid te installeren en toe te voegen aan package.json:
npm install camel-case --save
npm install camel-case --save
U kunt ook npm install --save-dev uitvoeren om aan te geven dat de afhankelijkheid alleen zal worden gebruikt voor ontwikkelingsdoeleinden (niet voor productie).
Node runnen in de terminal
Open Visual Code en dat is wat je nu zou moeten zien in de map node_modules:
camel-cade dependency installed in Viual Code
Maak een bestand met de naam index.js in AP/programmeren5/node-serieus/node-first-project en plaats daarin het volgende:
// we importeren het hele object
const camelCaseObject = require('camel-case') // Require left pad
// we hebben alleen de eigenlijke camelCase methode nodig
const camelCase = camelCaseObject.camelCase;
let output = camelCase("string") + '\n'; //=> "string"
output += camelCase("dot.case") + '\n'; //=> "dotCase"
output += camelCase("PascalCase") + '\n'; //=> "pascalCase"
output += camelCase("version 1.2.10") + '\n'; //=> "version_1_2_10"
console.log(output);
Omdat Node.js niet wordt herkend door de browser, testen we dit in de terminal. Voer in de shell het node commando uit gevolgd door de bestandsnaam in de root van uw project (AP/programmeren5/node-serieus/node-first-project):
node index.js
Je app in modules indelen
We splitsen onze broncode in meerdere JavaScript-bestanden om de leesbaarheid te vergroten en om de app in zijn geheel gemakkelijker te kunnen onderhouden. Ga terug naar je IDE (Atom, Sublime, Code - wat jij leuk vindt om in te werken) en maak de volgende mapstructuur:
node-serieus
eigen-modules
app
calc.js
index.js (het bestand dat we hierboven hebben gemaakt)
index.js
Het package.json bestand
Als je een nieuw Node.js-project maakt begin je met het maken van een package.json-bestand. Het is een JSON-weergave van de app en van de modules waarvan de app afhankelijk is (dependencies). Het bevat de naam van je app, de auteur en alle afhankelijkheden die nodig zijn om de toepassing uit te voeren. De afhankelijkheden-sectie wordt besproken hierboven.
Het package.json bestand automatisch aanmaken
Je kan ook interactief het package.json-bestand genereren met de opdracht npm init in de terminal. Als je op de Enter toets klikt wordt je gevraagd om o.a. de naam van je applicatie, de versie, de beschrijving enzovoort, op te geven. Dat hoef je niet te doen. Druk gewoon op Enter totdat je het JSON-fragment krijgt en de vraag Is this ok?. Druk nogmaals op enter en je package.json wordt automatisch gegenereerd in de map van je applicatie. Als u dat bestand opent in je IDE, ziet het er ongeveer zo uit:
Het is een goede gewoonte om een startscript toe te voegen aan het package.json-bestand. Dan kan je je toepassing ook starten met de opdracht npm start. Dat is handig als je bijvoorbeeld je applicatie bij een PaaS-provider wilt implementeren: het wordt herkend en de toepassing kan opgestart worden:
Om de applicatie te builden open je het bestand app/index.js. We herstructuren de code van hierboven. Het app/index.js-bestand bevat alleen de getallen waarvan de oneven getallen verdubbeld moeten worden. De logica van de berekening plaatsen we in een afzonderlijke module met de naam app/calc.js.
// app/calc.js
/* je wilt de oneven getallen verdubbelen, maar de oneven negeren.
Dat kan je met devolgde constructie:
*/
function doubleOddNumbers(numberList) {
return numberList.filter(function(number) {
return (number % 2 !== 0);
}).map(function(number) {
return number * 2;
});
}
module.exports.doubleOddNumbers = doubleOddNumbers;
Het index.js-bestand:
// index.js
require('./app/index');
Om te controleren of het gelukt is, open je de terminal en typ je npm start of node index.js in. Als je alles goed hebt gedaan, krijg je het antwoord terug:
The doubled numbers are [ 2, 6, 10 ]
Als er iets fout is gegaan, bekijk dan het consolelogboek zorgvuldig. Op basis daarvan kan je het probleem oplossen.
Nog een voorbeeld met Marvel (met dank aan Tim Jannsens)
Mappenstructuur maken
├───node-serieus
│ ├───marvel-project
│ │ └───app
Project initialiseren
Navigeer naar de map waarin je een project wil maken - in ons geval is dat AP/programmeren5/node-serieus.
In de terminal in die map typ je:
mkdir marvel-project
En initialiseer je deze map:
cd marvel-project
npm init
Een pop-up verschijnt in de terminal en stelt een paar vragen over je project:
npm init dialogbox marvel
ga naar de programmeren5/node-serieus/marvel-project map;
typ npm init
enter
enter
typ een beschrijving
enter
geef sleutelwoorden op
typ yes om te bewaren
Zoals je kan zien hebben we nu een package.json-bestand dat alle informatie bevat die we daarnet hebben ingevoerd:
npm init package.json for marvel created
Marvel package installeren
Marvel is an API wrapper for Marvel's Comics API en is beschikbaar op https://npm.io/package/marvel. Installeer de package in de map programmeren5/node-serieus/marvel-project.
npm install marvel
Maak een bestand met de naam index.js in AP/programmeren5/node-serieus/marvel-project en plaats daarin het volgende (kopie van ( https://npm.io/package/marvel):
var Marvel = require('marvel')
var marvel = new Marvel({ publicKey: "<pubKey>", privateKey: "<privateKey>"})
marvel.characters
.name("Hulk")
.get(function(err, resp) {
if (err) { console.log("Error: ", err) }
else { console.log(resp) }
})
Omdat Node.js niet wordt herkend door de browser, testen we dit in de terminal. Voer in de shell het node commando uit gevolgd door de bestandsnaam in de root van uw project (AP/programmeren5/node-serieus/marvel-project):
node index.js
We krijgen de volgende foutmelding:
run node marvel-project index.js error
We voegen de key's toe (gebruik geldige key's, voor de veiligheid plaats ik hier dummies):
var Marvel = require('marvel')
var marvel = new Marvel({ publicKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
privateKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx"})
marvel.characters
.name("Hulk")
.get(function(err, resp) {
if (err) { console.log("Error: ", err) }
else { console.log(resp) }
})
En proberen opnieuw:
run node marvel-project index.js no error
