L’idée est ici de garder votre application complètement indépendante, et d’éviter mes CDN sur votre page Web.
Nous allons utiliser le couple npm gulp pour ne prendre dans notre package que le nécessaire.
Présentations
NPM est le gestionnaire de package le plus connu de nodeJS
Gulp est une librairie très utilisée pour personaliser le déploiement et parfois préparer le package de livraison.
Création du Projet
Nous allons utiliser dans notre application les librairies JQuery et Loglevel. Pour ne pas les utiliser nous allons les récupérer avec NPM
Préparez un fichier package.json à la racine du projet comme suit : (Nous allons expliquer les scripts embarqués juste après)
{ "name": "mon-extension", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "node-clean": "npm prune && npm install", "build": "gulp build", "test": "echo 'no test'" }, "keywords": [], "author": "DarkNoon", "license": "GPL-2.0", "devDependencies": { "gulp": "^4.0.2" }, "dependencies": { "jquery": "^3.5.1", "loglevel": "^1.6.8" } }
Puis lancez npm install pour installer les packages dans le dossier node_modules.
npm install
Vous obtenez :
Gulp est mon ami
Nous allons créer une simple tâche de copie de fichiers avec Gulp. Nous faisons ça pour éviter de déployer le dossier node_moules qui est souvent bien trop rempli de dépendances que l’on n’utilise pas.
Voici le script :
const { src, dest } = require('gulp'); function update_jquery() { return src(["node_modules/jquery/dist/jquery.min.js"]).pipe(dest("contribs")); } function update_loglevel() { return src(["node_modules/loglevel/dist/loglevel.min.js"]).pipe(dest("contribs")); } function build(cb) { update_jquery(); update_loglevel(); cb(); } exports.build = build;
Le script va simplement copier les fichers nécessaires dans notre dossier contribs aveec la command build.
Ce qui nous permettra par la suite de produire un package sans Node Modules et de rester léger 🙂
J’espère que ce petit tutoriel vous a plu : vous pourrez le trouvez sur GitHub à cet endroit : Github