Les bundlers (générateur de bundle), on les utilise au quotidien. Ils sont indispensables dans les outils des développeurs front et ils ont beaucoup évolué. Nous passons en revue les principaux bundlers les plus utilisés et surtout nous parlons des nouvelles générations de bundler.

Pourquoi on utilise des bundlers :

  • Limiter les requêtes, minifier et éviter de polluer le scope global (window).
  • Avoir un code plus propre découpé en module.
  • Et une réutilisation du code.

Avant les bundlers:

  • Immediately Invoked Function Expression (IIFE).
(function foo() {  return bar;})();
  • Plugin jQuery qui s'appelait à travers jQuery
(function ($) {  $.fn.greenify = function () {    this.css('color', 'green');    return this;  };})(jQuery);

Les principaux types de modules :

  • CommonJS:
require('..');module.exports = ...;
  • AMD (Asynchronous Module Definition):
define(['dep1', 'dep2'], function (dep1, dep2) {  //Define the module value by returning a value.  return function () {};});
  • UMD (Universal Module Definition):
(function (root, factory) {    if (typeof define === "function" && define.amd) {        define(["jquery", "underscore"], factory);    } else if (typeof exports === "object") {        module.exports = factory(require("jquery"), require("underscore"));    } else {        root.Requester = factory(root.$, root._);    }}(this, function ($, _) {    // this is where I defined my module implementation    var Requester = { // ... };    return Requester;}));
import toto from ...;export default ...;

Nouvelle génération de bundler

  • Snowpack: En mode dev, pas de bundle. Recharge uniquement le fichier modifié. En production, par défaut, il fait une optimisation optionnelle, mais on est toujours sur du ESM. On peut ajouter des plugins (webpack, Rollup) pour faire un seul fichier. https://www.snowpack.dev/
  • Rome: https://github.com/rome/tools
  • Vite: Fais beaucoup de choses "out of the box”. Le mode dev est en ESM. Divise en 2 modules: le code source de l'app et les dépendances. Il prébundle les dépendances, car elles changent peu lors du dev. Le code source est en ESM. Fais un bundle (sans ESBuild mais avec Rollup) pour la production pour le moment. https://vitejs.dev/
  • ESBuild (Go) vraiment jeune pas encore prêt pour la production. Par contre extrêmement rapide et très prometteur. https://esbuild.github.io/
  • WMR: https://github.com/preactjs/wmr

3% vers l'objectif de 30$ par mois

L'ensemble des charges seront couvertes. Service de stockage et abonnement aux services utilisés.

Abonnez-vous sur votre plateforme de podcast préférée

> //
Copyright DOUBLE-SLASH 2020 - 2022 - Tous les droits sont réservés.