ESM.sh - Un CDN pour importer directement vos modules JavaScript

Aujourd’hui, je vais vous parler d’une solution qui va considérablement simplifier votre vie de pauvre développeur web au service de la startup nation. Vous en avez marre de vous taper des configurations Webpack interminables et des dépendances npm qui s’accumulent, ESM.sh est là pour vous aider à gérez vos imports JavaScript.

Ce CDN nouvelle génération va vous permettre d’importer n’importe quel module JavaScript directement via une URL, sans installation ni étape de build. Trop cool non ?

Mais commençons par le commencement. Comment ça marche ? Hé bien c’est d’une simplicité désarmante. Voici un exemple :

import confetti from 'https://esm.sh/[email protected]'

Hop et ça fait des confettis !

Plus besoin de npm install, de package.json ou de node_modules qui pèsent plus lourd que votre dernier backup. Le module est directement disponible dans votre code.

Et si vous êtes du genre à vouloir tout contrôler (comme moi !), vous allez adorer les options de personnalisation. Vous pouvez spécifier la version exacte des dépendances avec ?deps, utiliser le mode développement avec ?dev, ou même bundler toutes les dépendances en un seul fichier avec ?bundle=all.

import useSWR from 'https://esm.sh/[email protected]';

import React from 'https://esm.sh/react?dev';

Pour les amateurs de TypeScript (et je sais qu’il y en a beaucoup parmi vous), ESM.sh gère automatiquement les définitions de types. Plus besoin de jongler avec @types/whatever, tout est inclus !

Un aspect particulièrement astucieux est la gestion des Web Workers. Vous pouvez transformer n’importe quel module en worker avec une simple option :

import createWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker?worker';

const worker = createWorker();

Et pour ceux qui développent avec Deno, c’est encore mieux ! ESM.sh est totalement compatible et résout même les modules natifs de Node.js pour vous. C’est comme avoir le meilleur des deux mondes.

Petit bonus qui va faire plaisir aux perfectionnistes : vous pouvez “épingler” une version spécifique du build pour éviter toute surprise :

import React from 'https://esm.sh/react?pin=v135';

La cerise sur le sundae ? ESM.sh propose même un CLI pour gérer vos imports avec des import maps. Plus besoin de mettre à jour manuellement vos URLs, le CLI s’occupe de tout :

deno run -A -r https://esm.sh init

deno task esm:add react react-dom

Bien sûr, comme tout outil, il y a quelques points à garder à l’esprit :

• Les navigateurs doivent supporter les modules ES6
• La première importation d’un module peut prendre un peu de temps (le temps que ESM.sh le build et le cache)
• Pour les projets critiques en production, pensez à épingler les versions

En parlant de production, ESM.sh est propulsé par Cloudflare, donc vous pouvez dormir tranquille côté performances et disponibilité.

Un dernier conseil pratique : utilisez l’option ?dev pendant le développement pour avoir des messages d’erreur plus détaillés, et passez en mode production pour la mise en ligne finale.

Voilà, vous savez maintenant comment moderniser vos imports JavaScript sans prise de tête ! Plus d’excuse pour ne pas tester les dernières librairies qui vous font de l’œil. Y’a même un playground ici pour ceux qui veulent tester.

Et un grand merci à Lorenper !