Outillage Node.js

Créateur de la "JS fatigue" depuis le tout début 😎

# Chapitre 1

Installation

Ça peut être simple, mais on préfère utiliser un outil pour l'installation !

Node Version Manager

# Chapitre 1

https://github.com/nvm-sh/nvm

Node Version Manager

# Chapitre 1
$ nvm install 12

$ nvm use 12

$ node -v
v12.22.6
$ nvm install node
# "node" est un alias pour la dernière version de node

Node Version Manager

# Chapitre 1

Fichier .nvmrc

$ nvm use
Found '/path/to/project/.nvmrc' with version <5.9>
Now using node v5.9.1 (npm v3.7.3)
// .nvmrc

v16.8.0

Les alternatives ?

# Chapitre 1

- Volta

- N (utilise npm i -g n 🙃)

- ...

# Chapitre 2

Gestion des dépendances

NPM, Yarn, PNPM

# Chapitre 2

NPM

 Node Package Manager

 

- A participé au succès de Node.js

- Installé par défaut avec Node
- Annuaire titanesque !

# Chapitre 2

NPM

Package.json
 

- Description des dépendances

- Ajoute des meta-informations

 

{
    "name": "Nom du projet",
    "version": "1.0.0-alpha-1",
    "description": "Description du projet",
    "author": "Florent Berthelot",

    "dependencies": {
      "@angular/core": "16.*.*"
    },
    "devDependencies": {
      "typescript": "^4.4.2"
    },
    "engines": {
      "node": ">=15"
    },
    "private": true
}
# Chapitre 2

NPM

Les types de dépendances

- Production (ou normal) : Celles qui sont utilisé en production
- devDependencies : Celles qui sont utilisé par nous les Devs

- peerDependencies : Celles qui doivent être installé en complément
- optionalDependencies : Comme les peer, mais optionnel

- bundledDependencies : Très rare, pas de semver ici, install .tgz

# Chapitre 2

NPM

Plusieurs commandes à connaître :

 

- npm init

- npm i <dependancyName>

- npm i -D <dependancyName>

- npm outdated

# Chapitre 2

NPM

Node_module

# Chapitre 2

NPM

Une gestion de dépendance en arbre

React

Redux

Lodash 2.0.0

Lodash

1.0.0

node_modules

# Chapitre 2

NPM

Une gestion de dépendance en arbre

React

Redux

Lodash 1.0.0

Lodash

1.0.0

node_modules

# Chapitre 2

NPM

Une gestion de dépendance en arbre - Hoisting

React

Redux

Lodash

1.0.0

node_modules

# Chapitre 2

NPM

Semver

^ 1.0.0 === 1.x.x

~ 1.0.0 === 1.0.x

# Chapitre 2

NPM

Npm Script

{
  "name": "pokemon-arena",
  "version": "1.0.0",
  "licence": "MIT",
  "private": true,
  "dependencies": {
    "react": "^16.8.4"
  },
  "scripts": {
    "test": "jest --coverage",
  },
  "devDependencies": {
    "jest": "^18.0.0",
  }
}

npm run test -- --watch
jest --coverage --watch
# Chapitre 2

NPM

NPX

npm install -g @nestjs/cli

nest --help

npx @nestjs/cli --help
# Chapitre 2

NPM

NPM VS Yarn VS PnPM

npm i packageName

yarn add packageName

pnpm add packageName
# Chapitre 2

NPM

NPM VS Yarn VS PnPM

- Yarn gère le Flat (gestion de conflit)

- PNPM ne fait pas de hoisting (plus rapide)

- Yarn 2+ : Plug'n'Play, plus de node_module (deno like)

 

Meilleur gestion des monorepos pour Yarn et PNPM

# Chapitre 3

Compilation 🙃

Babel, SWC, TypeScript, ...

Un exemple :

# Babel

Rends insouciant

# Babel

Compile (ou transpile) du code EcmaScript 2024 en la version de EcmaScript que l'on veut !

# Chapitre 4

Bundler (and more)

Webpack, Vite, ...

# Chapitre 5

Coup de pouces pour devs

Nodemon, .editorconfig

# Chapitre 6

Validation statique de code

.editorconfig, prettier, ESLint

# Chapitre 7

Frameworks de Tests

Made with Slides.com