https://slides.com/sebastienjean/industrialisation-des-developpements-javascript
Les TP de ce module ont pour but de mettre en pratique les différentes techniques d'industrialisation vues pendant la formation.
Dossier : tp-0
.
Ce dossier contient les fichiers de base, non industrialisés. Ils vont nous permettre de mettre en place les différentes techniques.
Il s'agit d'un simple site internet réalisé avec jQuery et Bootstrap. Il présente une collection d'images. Il est tiré de cet exemple Bootstrap : https://getbootstrap.com/docs/4.3/examples/album/.
Le fichier assets/js/main.js
remplace toutes les images (SVG placeholders) par une image aléatoire tirée du site Lorem Picsum.
Dossier : tp-npm
.
Ce TP a pour but de remplacer tous les liens pointant vers des CDN :
- https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
- https://code.jquery.com/jquery-3.3.1.slim.min.js
- https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js
Pour cela, on installe les dépendances avec NPM et on remplace les chemins des ressources par des chemins locaux.
npm ci
./index.html
Dossier : tp-gulp
.
Ce TP a pour but de produire un dossier dist
contenant toutes les ressources à utiliser pour la mise en ligne du site.
Les fichiers CSS et JS sont minifiés, le fichier index.html
et les dépendances (jQuery, Bootstrap) sont copiées dans le dossier dist
. Cette opération est réalisée à partir de ce fichier gulpfile.js
: https://github.com/cferdinandi/gulp-boilerplate/blob/master/gulpfile.js.
🚨 Pour cela, j'ai modifé copyFiles
du fichier gulpfile.js
pour qu'il prenne en paramètre d'entrée un tableau (pour spécifier plusieurs fichiers à copier).
npm install --global gulp-cli
npm ci
gulp
./dist/index.html
Dossier : tp-webpack
.
Ce TP a pour but de produire un dossier dist
contenant notre fichier index.html
et un bundle à utiliser pour la mise en ligne du site.
Pour cela, j'ai modifié le code JS pour y inclure toutes les dépendances : locales, distantes, CSS et JS grâce au fichier assets/js/index.js
.
npm ci
npm run build
./dist/index.html
Dossier : tp-jest
.
Ce TP a pour but d'ajouter des tests à notre site. Dans cet exemple, seuls les tests pour la fonction getImage
sont ajoutés.
npm ci
npm run test