ESM und CommonJS, nebeneinander, mit einem Klick
Du oeffnest ein altes Node-Projekt und die Datei nutzt `require` und `module.exports`. Oder andersrum: ein Tutorial pastet `import`/`export` und deine Codebase laeuft noch auf plain CommonJS. Gleiches JavaScript, zwei Dialekte, jeder Dev muss frueher oder spaeter zwischen ihnen uebersetzen.
Der Konverter macht genau das. Paste eine Datei links, waehl eine Richtung (ESM -> CommonJS oder CommonJS -> ESM), das rechte Panel zeigt den gleichen Code im anderen Format. Er behandelt die acht Formen, die du wirklich in echtem Code triffst: Default-Imports, Named Imports, Namespace-Imports, Side-Effect-Imports, Default-Exports, Named Const Exports, batched `export { a, b }`, und bare `require('x')`.
Wo die zwei Formate nicht sauber matchen (dynamisches `require`, `__dirname` in ESM, Conditional Exports, Top-Level `await`), sagt dir ein gelbes Warning-Panel genau, was per Hand zu fixen ist. Kein Upload, kein Install, keine Babel-Config: Konvertierung laeuft im Browser, sobald du aufhoerst zu tippen.
So nutzt du das Tool
- Waehl eine Richtung oben: ESM -> CommonJS wenn deine Quelle `import`/`export` nutzt, CommonJS -> ESM wenn `require`/`module.exports`.
- Code pasten im linken Panel. Eine Sample-Datei ist per Default geladen, damit du Output siehst, bevor du ueberschreibst.
- Das rechte Panel zeigt den konvertierten Code sofort (Auto-Convert ist an). Aus, wenn du eine grosse Datei erst bearbeiten und dann Convert druecken willst.
- Result kopieren mit dem Button oben rechts im Output-Panel. In den Editor, fertig.
- Erscheint ein gelbes Warning-Panel, lies es: das sind Zeilen, die der Konverter nicht sauber umschreiben konnte (dynamisches `require`, `__dirname`, Top-Level `await`, gemischte Exports). Das Panel zeigt Zeile und sagt, was zu tun ist.
- Klick Sides tauschen, um den konvertierten Output durch die Gegenrichtung zu schicken. Praktisch fuer Sanity-Check.
- Beispiel laden wirft ein realistisches Beispiel fuer die aktuelle Richtung rein, hilfreich wenn du vergessen hast, welche Form wohin mappt.
Wann das nuetzlich ist
Sieben Situationen, in denen ESM/CommonJS-Flippen sonst eine halbe Stunde Handarbeit waere:
- Altes Node-Projekt zu ESM migrieren. Dein Team hat `"type": "module"` in `package.json` gesetzt und jede Datei mit `require` bricht. Paste rein, ESM-Version, zurueckpasten. 50-Datei-Migration faellt von einem Tag auf eine Stunde.
- Tutorial-Snippet in CommonJS-Projekt kopieren. Der Blogpost nutzt modernes `import x from 'pkg'`, deine Codebase laeuft noch Node 14/Jest 27 mit CJS. Ein Paste, ein Klick, das Snippet passt zum Projekt-Stil.
- Code-Antwort fuer alle teilen. Du postest auf Stack Overflow oder im Slack-Thread und weisst nicht, welches Format der Leser nutzt. Konvertier dein Snippet ins Gegenteil und paste beides.
- Dual-Package schreiben. Du publishst eine Library, die beides liefert. Schreib es einmal in ESM, konvertier zu CJS fuer den `.cjs`-Build, check die Warnings, ship beides. Spart eine Rollup-Config fuer winzige Single-File-Packages.
- Onboarding in Legacy-Codebase. Die Codebase nutzt noch `module.exports`. Du denkst in `import`. Paste jede Datei rein, lies die ESM-Version fuer ein mentales Modell, dann zurueck zum Code.
- Schneller Refactor vor Code-Review. Ein Reviewer hat "ESM ueberall" gefragt. Jede angefasste Datei durch den Konverter, Warnings fixen, PR shippen. 5 Minuten statt 50.
- Den Unterschied erklaeren. Datei links, Aequivalent rechts. Die acht Formen stehen nebeneinander, leichter als Folien fuer den Junior in der ersten Woche.