Vite.., un bundler !

46:39
 
Partager
 

Manage episode 290323831 series 2830225
Par Double Slash, découvert par Player FM et notre communauté - Le copyright est détenu par l'éditeur, non par Player F, et l'audio est diffusé directement depuis ses serveurs. Appuyiez sur le bouton S'Abonner pour suivre les mises à jour sur Player FM, ou collez l'URL du flux dans d'autre applications de podcasts.

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): ```js 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

Podcast présenté par :

27 episodes