Node Package Manager (npm)

npm.js

npm.js is de package manager voor JavaScript. Het is de grootste software registry ter wereld. Hier vind je heel veel packages die je kan gebruiken in je projecten. Wil je een bepaalde package zoeken dan kan je dat doen op de npmjs website. Je vind er ook uitgebreide documentatie over de packages en hoe je deze kan gebruiken.

Npm packages kunnen typisch op drie verschillende manieren geïnstalleerd worden: als dependency, dev dependency, en globaal. Een dependency wordt geïnstalleerd wanneer een pakket nodig is voor de werking van je applicatie in productie; dit zijn bijvoorbeeld bibliotheken die essentieel zijn om de applicatie te laten draaien (bv. leaflet om je interactieve map te tonen). Een dev dependency daarentegen is een pakket dat alleen nodig is tijdens de ontwikkeling, zoals tools voor testen of linting, en wordt niet meegeleverd in productie. Tot slot kunnen pakketten ook globaal geïnstalleerd worden, wat betekent dat ze overal op je systeem beschikbaar zijn, ongeacht welk project je gebruikt. Dit wordt meestal gedaan voor CLI-tools die je buiten een specifiek project wilt gebruiken, zoals TypeScript of ESLint.

Installatiemethode	Beschrijving	Installatievoorbeeld
Dependencies	Packages die nodig zijn om de applicatie in productie te laten draaien.	npm install package-name
DevDependencies	Packages die alleen nodig zijn tijdens de ontwikkeling (testing, linting, building, enz.).	npm install package-name --save-dev
Globale installatie (-g)	Packages die globaal op je systeem worden geïnstalleerd, vaak gebruikt voor CLI-tools.	npm install package-name -g

package.json

Elk project heeft een package.json bestand. Dit bestand bevat alle informatie over je project. Het bevat ook een lijst van alle packages die je nodig hebt voor je project. Wanneer je een package installeert met npm dan wordt deze package toegevoegd aan dit bestand in de juiste dependency sectie.

Packages installeren in de CLI

# Install als Dependency 
# Packages die essentieel zijn voor de uitvoering van je applicatie in productie
npm install readline-sync

# Install als DevDependency
# Packages die je nodig hebt voor de ontwikkeling van je project
npm install @types/readline-sync --save-dev

package.json

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "Project description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Andie Similon",
  "license": "ISC",
  "dependencies": {
    "readline-sync": "^1.4.10"
  },
  "devDependencies": {
	  "@types/readline-sync": "^1.4.8"
  }
}

Je kan alle dependencies installeren aan de hand van het volgende commando. Dus je moet niet elke package apart installeren.

npm install

node_modules

Wanneer je een package installeert met npm dan wordt deze package geïnstalleerd in een map genaamd node_modules. Deze map bevat alle packages die je nodig hebt voor je project. Je moet deze map niet zelf aanmaken. npm doet dit automatisch voor je.

Omdat alle dependencies opgegeven staan in het package.json bestand en je deze ten allen tijde kan installeren aan de hand van het npm install commando, moet je deze map ook niet toevoegen aan je git repository. Het is een goed idee om deze map toe te voegen aan je .gitignore bestand. Voeg deze map ook nooit toe aan een zip bestand dat je doorstuurt naar iemand anders. Deze persoon kan dan zelf de dependencies installeren aan de hand van het npm install commando.

Wanneer je een package terug zou willen verwijderen uit je node_modules folder kan je dit doen met het volgende commando:

npm uninstall <package-name>

Al de bestanden die je voordien had gedownload bij het installeren van deze package in de node_modules folder zijn nu terug verwijderd. De package is ook verwijderd uit de package.json file.

Importeren van npm packages

Dit is ook de manier hoe je meestal npm packages importeert. Daar maakte het ook nooit uit welke naam je achter de import zette.

import readline from 'readline-sync';

Deze functies kon je dan gebruiken door middel van de naam die je achter de import zette gevolgd door een punt.

const name = readline.question('Wat is je naam? ');

Voorbeeld: Chalk

We gaan in dit voorbeeld de chalk package gebruiken. Deze package zorgt ervoor dat je tekst in de terminal kan kleuren. We gaan een programma maken dat de naam van de gebruiker in het rood toont.

Het eerste wat we moeten doen is de package installeren.

npm install chalk@4

Opgelet we moeten hier de versie 4 installeren omdat de nieuwste versie niet werkt met ts-node (en oudere versies van node)

Vervolgens bekijken we de documentatie van de package op de npmjs website. Hier vinden we hoe we de package kunnen gebruiken.

import chalk from 'chalk';

const name = 'Jelle';

console.log(chalk.red(name));

Dit zal de naam Jelle in het rood tonen in de terminal.

Importeren van types

http://definitelytyped.github.io/

Af en toe kom je in contact met een npm package die geen meegeleverde types hebben. Dit is bijvoorbeeld het geval bij de readline-sync package. In dat geval kan je gebruik maken van de @types (ook gekend als DefinitelyTyped) packages. Deze bevatten de types die bij de npm package horen. Je moet deze dan wel altijd apart installeren.

npm install --save-dev @types/readline-sync

Een overzicht van alle @types packages die je nodig hebt in deze cursus:

npm install --save-dev @types/node
npm install --save-dev @types/readline-sync
npm install --save-dev @types/express
npm install --save-dev @types/ejs
...

Je kan op de npmjs website heel eenvoudig zien of een bepaalde package TypeScript support heeft:

• Bevat deze een tag? Dan kan je deze installeren aan de hand van de bovenstaande commando's
• Bevat deze een tag, dan zitten de types al in de npm package en dan hoef je niets te doen.

Bevat deze geen van beide? Dan heb je helemaal geen types en heb je geen voordelen van TypeScript. Je moet dan ook nog een extra aanpassing doen aan je project om deze library toch nog te gebruiken.

Bijvoorbeeld de rainbow-colors-array package bevat geen TypeScript support en geen @types package. Je kan deze dan toch nog gebruiken door in je project een types.d.ts bestand aan te maken met de volgende inhoud.

declare module 'rainbow-colors-array';

Dit is ook wat je vscode je aanraad als je over de error hovered als hij de types niet vindt:

Voorbeeld: Lodash

We gaan in dit voorbeeld de lodash package gebruiken. Deze package bevat heel veel handige functies die je kan gebruiken in je projecten. Het is een soort zwitsers zakmes voor JavaScript.

We installeren deze library aan de hand van het volgende commando.

npm install lodash

Deze library heeft geen ingebouwde types. We moeten deze dus apart installeren.

npm install --save-dev @types/lodash

Vaak is de documentatie bedoeld voor een ouder module systeem. We moeten dan de documentatie aanpassen naar het nieuwe module systeem.

var _ = require('lodash');

Dit moeten we aanpassen naar het nieuwe module systeem.

import _ from 'lodash';

Vervolgens kunnen we de functies gebruiken zoals beschreven in de documentatie.

Bv de reverse functie.

const array = [1, 2, 3];

console.log(_.reverse(array));

of de round functie.

console.log(_.round(4.006, 2));

In die oefeningen zullen we nog een aantal handige functies van lodash bekijken.