TW3 — Technologies du Web 3

Exercice — Initialiser et automatiser un projet npm

Mettez en place un projet npm minimal (package.json, installation d'une dépendance et script automatisé) en appliquant les commandes essentielles de npm.

Objectif : partir d'un dossier vide et en faire un projet npm fonctionnel — package.json, une dépendance installée et un script start exécutable. Vous pratiquez npm init, npm install, package.json et npm run.

📚 Apport3′

Le projet : un projet npm minimal

Dans le dossier projet-fil-rouge-tw3 créé en séance 1, initialisez npm, installez une dépendance (lodash), puis ajoutez un script start qui affiche un message dans la console. Vérifiez que npm start fonctionne.

1. Initialiser

npm init -y génère un package.json par défaut.

2. Installer une dépendance

npm install lodash l'ajoute à dependencies et crée node_modules.

3. Déclarer un script

Dans package.json, ajoutez "scripts": { "start": "node index.js" }.

4. Exécuter

npm start lance le script start.

Exemple de package.json attendu

{
  "name": "projet-fil-rouge-tw3",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

Code JavaScript

// index.js
const _ = require("lodash")
console.log(_.upperCase("bonjour npm"))

Commandes attendues

npm install
npm start
# Affiche : BONJOUR NPM
🛠️ Atelier6′

🛠️ Atelier : Best Practices

  • Utilisez npm init -y pour éviter l'interaction utilisateur
  • Committez package.json et package-lock.json mais pas node_modules
  • Ajoutez un .gitignore incluant node_modules/
🏋️ Exercice5′

🏋️ Exercice supplémentaire

Installez la bibliothèque dayjs (non vue en cours, l'occasion de lire une doc npm par vous-même) et utilisez-la pour afficher la date actuelle formatée :

npm install dayjs
import dayjs from "dayjs";

console.log(dayjs().format("DD/MM/YYYY"));
🎯 Synthèse0′

🎯 Synthèse

npm gère les dépendances et les scripts d'un projet via package.json. Dans le projet fil rouge (branche session-01), ce chapitre ajoute le package.json et le script de démarrage.

npm

Terminez le quiz du chapitre pour le marquer comme complété.

Tableau de bord

On this page