Utilisez NPM et Gulp pour éviter les CDN

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.