Les outils de développement

npm

npm est un gestionnaire de dépendances. Il permet de centraliser toutes les librairies utilisés par votre application au même endroit, et d'automatiser leurs mises à jour.

Pour le développement web, nous utilisons principalement les gestionnaires suivants :

• Javascript : npm
• PHP : composer

Installer npm

npm est livré avec Node.js, une plateforme de développement javascript côté serveur. Pour l'utiliser, vous devez télécharger et installer Node.js depuis le site officiel :

Démarrer un projet avec npm

npm est un programme qui s'exécute en ligne de commande. Vous aurez donc besoin d'ouvrir un terminal.

Tout d'abord, voici quelques commandes utiles :

• cd [nom du répertoire] : rentre dans le répertoire donné
• ls : liste le contenu du répertoire
• mkdir [nom du répertoire] : crée un nouveau répertoire
• touch [nom du fichier] : crée un nouveau fichier
• cat [nom du fichier] : affiche le contenu d'un fichier

Créez un nouveau répertoire destiné à votre premier projet npm dans le répertoire htdocs de MAMP.

cd /Applications/MAMP/htdocs
mkdir javascript-npm
cd javascript-npm

Nous allons maintenant utiliser la commande npm init à l'intérieur de notre nouveau répertoire pour initialiser notre projet npm.

npm init -y

L'option -y permet d'utiliser les paramètres par défaut pour l'initialisation du projet.

Durant l'initialisation, npm a créé un fichier package.json. C'est dans ce fichier que nous listerons toutes les dépendances de notre projet.

Pour installer des dépendances avec npm, nous utiliserons désormais la commande npm install.

La liste des packages disponibles se trouve sur npmjs.org

Installons par exemple Bulma :

npm install bulma

Le répertoire de votre thème contiendra un nouveau dossier node_modules. C'est ici que seront enregistrés tous les packages que vous installerez avec npm.

Si vous ouvrez votre fichier package.json, vous constaterez également que le package a été ajouté à la liste des dépendances.

{
  "name": "javascript-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bulma": "^0.9.3"
  }
}

Tous les packages que vous installez avec npm install sont enregistrés dans ce fichier avec leur numéro de version. Vous pourrez alors réinstaller d'un seul coup toutes les dépendances listées en exécutant simplement npm install et les mettre à jour avec npm update. Cela est particulièrement utile lorsque l'on utilise Git et encore plus lorsque l'on travaille en collaboration avec d'autres personnes sur un même projet.

Sass

Sass est un préprocesseur CSS. Il s'agit d'un programme qui permet de compiler un fichier écrit avec une syntaxe simplifiée en un fichier CSS.

Concrètement, l'objectif du préprocesseur est de simplifier l'écriture du CSS, principalement via l'utilisation de variables et de fonctions, et la possibilité d'imbriquer les blocs de styles.

Le code Sass doit être écrit dans des fichiers avec l'extension .scss Il vous faudra ensuite un compilateur pour générer le fichier CSS correspondant.

Prenons par exemple le code CSS d'un menu de navigation :

header .menu {
    display: flex;
    justify-content: center;
    background-color: black;
    border-bottom: 2px solid #086375;
}

header .menu .menu-item a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 1rem;
}

header .menu .menu-item a:hover {
    background-color: #086375;
}

Avec Sass, on pourra écrire ce même code de cette façon :

$blue: #086375;

header .menu {
    display: flex;
    justify-content: center;
    background-color: black;
    border-bottom: 2px solid $blue;

    .menu-item a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 1rem;

        &:hover {
            background-color: $blue;
        }
    }
}

Installer Sass

Pour transformer vos fichiers .scss en fichiers .css, vous aurez besoin d'un compilateur. Vous pouvez installer le compilateur Sass via npm en tapant dans votre terminal la commande suivante :

npm install -g sass

L'option -g permet d'indiquer à npm d'installer le package de façon globale, c'est-à-dire qu'il ne sera pas lié à votre projet mais à votre machine. Vous pourrez alors l'utiliser depuis n'importe quel répertoire.

Pour vérifier que l'installation a fonctionné correctement, tapez maintenant la commande sass --version dans votre terminal. Cela devrait vous afficher les détails de version de Sass.

Utiliser Sass

Pour commencer, nous allons structurer notre projet afin de séparer nos fichiers sources .scss de nos fichiers compilés en .css.

À la racine de votre projet, créez un répertoire src dans lequel vous créerez un sous-répertoire sass. Créez également un répertoire build contenant un sous-répertoire css afin d'obtenir la structure suivante :

/src
  ∟ sass
/build
  ∟ css

Dans le répertoire src/sass, créez un fichier main.scss et écrivez le code suivant :

$blue: #0000ff;
$red: #ff0000;

h1 {
    color: $blue;
}

h2 {
    color: $red;
}

Pour compiler ce fichier, nous utiliserons la commande sass précédemment installée. La commande prend deux paramètres : le fichier source et la destination.

Dans notre cas, nous allons compiler le fichier src/sass/main.scss et enregistrer le résultat dans le répertoire build/css.

sass src/sass/main.scss build/css/main.css

Le fichier CSS correspondant contient alors le code suivant :

h1 {
  color: #0000ff;
}

h2 {
  color: #ff0000;
}

/*# sourceMappingURL=main.css.map */

Lorsque vous utilisez la commande sass, vous pouvez spécifier le paramètre --watch juste avant le chemin du fichier source pour indiquer à Sass de compiler automatiquement votre fichier après chaque modification.

sass --watch src/sass/main.scss build/css/main.css

En exécutant cette commande, votre fenêtre de terminal ne sera plus disponible. Pour arrêter le programme, vous devrez utiliser la combinaison de touches Ctrl+C.

Importer des modules

Sass vous permet également de séparer votre code CSS en plusieurs fichiers. Cela permet de structurer votre code dans de petits fichiers et le rendre ainsi plus lisible.

Admettons que nous souhaitions écrire nos variables dans un fichier à part. Nous allons alors créer un fichier _variables.scss au même niveau que le fichier main.scss dans lequel nous indiquerons les définitions de nos deux couleurs :

$blue: #0000ff;
$red: #ff0000;

Dans le fichier main.scss, nous utiliserons l'instruction @import pour importer le fichier :

@import 'variables';

h1 {
    color: $blue;
}

h2 {
    color: $red;
}

Nous pouvons maintenant importer Bulma, que nous avons installé à l'étape précédente avec npm, en faisant appel directement au répertoire node_modules.

@import 'variables';
@import '../../node_modules/bulma/bulma';

h1 {
    color: $blue;
}

h2 {
    color: $red;
}

Étant donné que nous compilons maintenant nous-mêmes le fichier source de Bulma, nous pouvons désormais personnaliser l'apparence du framework en réécrivant ses variables.

La liste des variables de Bulma est disponible dans la documentation.

Par exemple, déclarez la variable $primary pour changer la couleur principale :

$primary: #00ff00;

Pour aller plus loin...

Sass vous permet aussi de créer des fonctions, des listes, des boucles... Pour en savoir plus, référez-vous à la documentation.

Webpack

Webpack est un module bundler. C'est un outil qui permet de :

• Compiler plusieurs fichiers sources (Javascript, Sass et autres) en code compréhensible par le navigateur
• Importer et utiliser des modules externes installés avec npm
• Optimiser les fichiers générés pour en réduire le poids

S'il est très pratique et largement utilisé aujourd'hui, Webpack est un outil relativement complexe à configurer.

Pour mettre en place Webpack dans un projet web, il faut :

• Installer Webpack à l'aide de npm npm install webpack
• Importer les loaders nécessaires pour chaque type de fichier pris en charge (sass-loader pour compiler le code Sass, babel-loader pour rendre le code compilé compatible avec d'anciens navigateurs, ...)
• Créer un fichier de configuration webpack.config.js et y indiquer les actions à effectuer pour chaque type de fichier

Le fichier de configuration peut rapidement devenir très complexe, surtout pour des débutants. Voici par exemple un fichier de configuration minimal pour un projet utilisant Sass et Babel :

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

var config = {
  mode: 'development',
  entry: './src/js/app.js',
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.s?css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css'
    })
  ]
};

module.exports = config;

Laravel Mix

Heureusement, d'autres personnes ont travaillé sur des outils pour nous simplifier la vie. C'est le cas de Laravel Mix, un outil permettant de mettre en place rapidement une configuration Webpack minimale avec les outils les plus courants.

Pour installer Laravel Mix dans votre projet, il suffit de l'importer avec npm pour l'ajouter à votre liste de dépendances.

npm install laravel-mix

Créez ensuite le fichier de configuration webpack.mix.js à la racine de votre projet.

touch webpack.mix.js

Enfin, écrivez le code suivant dans le fichier webpack.mix.js

let mix = require('laravel-mix');

mix.js('src/js/app.js', 'dist/js');

Ces instructions permettent de compiler le code contenu dans le fichier src/js/app.js et de placer le résultat dans le répertoire dist/js. Pour lancer la compilation, lancez maintenant la commande suivante :

npx mix

Un nouveau fichier app.jsest alors créé dans le répertoire de destination dist/js. C'est celui-ci qu'il faudra importer dans votre page HTML.

Vous devrez donc mettre à jour votre balise script pour que cette dernière appelle le fichier compilé plutôt que la source.

    ...

    <script src="dist/js/app.js">
</body>
</html>

Lorsque vous développez, vous pouvez également utiliser la commande suivante pour recompiler automatiquement après chaque modification du fichier source :

npx mix watch

Utiliser des modules

Maintenant que votre code Javascript est compilé, vous pouvez installer des modules externes avec npm et les importer dans votre code source. On entend par "module" ou "librairie" tout fragment de code qui peut être réutilisé dans un but précis. Il peut s'agir par exemple d'un carousel, d'un gestionnaire d'animations ou même d'un framework.

Aujourd'hui, tous les modules — ou en tout cas une vaste majorité d'entre eux — sont disponibles sur npmjs.com et peuvent alors être installés via npm.

Voici une liste non exhaustive de modules réputés que j'utilise fréquemment :

• GSAP : gestionnaire d'animations
• Swiper : librairie Javascript permettant de créer des carousels
• Bulma : framework CSS
• Vivus : librairie Javascript permettant d'animer des SVG
• Three.js : librairie Javascript pour gérer de la 3D
• Vue.js : framework Javascript
• Tailwind : framework CSS

En règle générale, chaque module dispose d'une documentation plus ou moins détaillée sur la manière de l'installer et de l'utiliser.

Prenons l'exemple de GSAP. Il suffit de se rendre sur la page d'installation et de descendre jusqu'à la section "NPM / Build Tools" pour voir comment l'installer avec NPM.

Dans le répertoire de votre projet, lancez donc la commande suivante pour installer le module gsap et l'ajouter à votre liste de dépendances.

npm install gsap

Vous pouvez désormais l'importer en ajoutant cette instruction au début de votre fichier src/js/app.js :

import { gsap } from "gsap";

Et voilà, le module sera alors automatiquement importé lors de la compilation et ajouté au fichier compilé. Vous pouvez donc utiliser GSAP de façon classique à la suite de cette instruction.

import { gsap } from "gsap";

gsap.from('.element', {
    scale: 2,
    rotate: 45,
    duration: 2
});

Utiliser Sass

Laravel Mix peut également compiler le langage Sass. Pour cela, ajoutez simplement l'instruction sass() en précisant le chemin du fichier source et la destination du fichier compilé.

let mix = require('laravel-mix');

mix.js('src/js/app.js', 'dist/js')
   .sass('src/sass/app.scss', 'dist/css');

Dans l'exemple ci-dessus, nous avons créé un nouveau fichier app.scss dans le répertoire src/sass. Celui-ci sera compilé dans dist/css/app.css.

Comme pour Javascript, vous pouvez importer des modules externes installés avec NPM dans vos fichiers Sass. Grâce à Webpack, nous pouvons désormais utiliser le symbôle ~pour indiquer au compilateur d'aller chercher un module situé dans le répertoire node_modules.

Pour importer Bulma, que nous avons déjà installé durant les étapes précédentes, il n'est donc plus nécessaire de préciser le chemin vers le dosser node_modules :

@import 'variables';
@import '~bulma/bulma';

...