ESM et CommonJS, côte à côte, en un clic
Vous avez ouvert un vieux projet Node et le fichier utilise `require` et `module.exports`. Ou l'inverse : un tuto colle `import`/`export` et votre codebase tourne encore sur du CommonJS simple. Même JavaScript, deux dialectes, chaque développeur doit finir par traduire entre les deux.
Ce convertisseur fait exactement ça. Collez un fichier à gauche, choisissez une direction (ESM → CommonJS ou CommonJS → ESM), et le panneau de droite affiche le même code dans l'autre format. Il gère les huit formes que vous rencontrez vraiment dans du vrai code : imports par défaut, imports nommés, imports namespace, imports side-effect, exports par défaut, exports const nommés, `export { a, b }` groupés, et `require('x')` nu.
Là où les deux formats ne mappent pas proprement (`require` dynamique, `__dirname` en ESM, exports conditionnels, top-level `await`), un panneau d'avertissement jaune vous dit exactement quoi corriger à la main. Pas d'upload, pas d'install, pas de config Babel : la conversion tourne dans votre navigateur dès que vous arrêtez de taper.
Comment l'utiliser
- Choisissez une direction en haut : ESM → CommonJS si votre source utilise `import` / `export`, CommonJS → ESM si elle utilise `require` / `module.exports`.
- Collez votre code dans le panneau de gauche. Un fichier exemple est chargé par défaut pour que vous voyiez à quoi ressemble la sortie avant de le remplacer.
- Le panneau de droite affiche le code converti immédiatement (auto-convert est activé). Désactivez-le si vous voulez éditer un gros fichier d'abord et cliquez sur Convert quand vous êtes prêt.
- Copiez le résultat avec le bouton en haut à droite du panneau de sortie. Déposez-le dans votre éditeur et c'est fait.
- Si un panneau d'avertissement jaune apparaît sous les panneaux, lisez-le : ce sont les lignes que le convertisseur n'a pas pu réécrire proprement (`require` dynamique, `__dirname`, top-level `await`, exports mixtes). Le panneau pointe la ligne et explique quoi faire.
- Cliquez sur Swap sides pour faire un aller-retour de la sortie convertie dans l'autre direction. Pratique quand vous voulez vérifier que votre fichier marche dans les deux.
- Utilisez Load sample pour déposer un exemple réaliste pour la direction actuelle, utile quand vous avez oublié quelle forme mappe où.
Quand c'est utile
Sept situations où basculer entre ESM et CommonJS prendrait sinon une demi-heure d'édition à la main :
- Migrer un vieux projet Node vers ESM. Votre équipe a mis `"type": "module"` dans `package.json` et maintenant chaque fichier avec `require` casse. Collez chacun, obtenez la version ESM, recollez. Une migration de 50 fichiers passe d'une journée à environ une heure.
- Copier un snippet de tuto dans un projet CommonJS. Le billet de blog utilise la syntaxe moderne `import x from 'pkg'`, votre codebase tourne encore sur Node 14 / Jest 27 avec du CJS simple. Un collage, un clic, le snippet correspond maintenant au style de votre projet.
- Partager une réponse de code qui marche pour tout le monde. Vous postez sur Stack Overflow ou dans un thread Slack et vous ne savez pas quel format le lecteur utilise. Convertissez votre snippet vers l'opposé et collez les deux, avec une ligne de note sur quel dialecte est lequel.
- Créer un paquet dual. Vous publiez une bibliothèque qui livre les deux builds ESM et CommonJS. Écrivez-la une fois en ESM, convertissez en CJS pour le build `.cjs`, jetez un œil aux avertissements, livrez les deux. Économise une config Rollup pour les petits paquets mono-fichier.
- Onboarding dans une codebase legacy. La codebase que vous avez rejointe utilise encore `module.exports`. Vous pensez en `import`. Collez chaque fichier en l'apprenant, lisez la version ESM pour bâtir un modèle mental, puis revenez au code réel.
- Refacto rapide avant une code review. Un reviewer a demandé "utiliser ESM partout". Passez chaque fichier touché dans le convertisseur, corrigez les avertissements, livrez la PR. La partie mécanique ennuyeuse prend 5 minutes au lieu de 50.
- Enseigner la différence entre les deux. Affichez un fichier à gauche, l'équivalent à droite. Les huit formes courantes s'alignent côte à côte, plus facile que des slides pour la première semaine d'un dev junior.