ESM i CommonJS obok siebie, jednym kliknięciem
Otwierasz stary projekt w Node i plik używa `require` i `module.exports`. Albo odwrotnie: tutorial wkleja `import`/`export`, a Twój kod działa na klasycznym CommonJS. Ten sam JavaScript, dwa dialekty, każdy programista prędzej czy później musi się między nimi przepisywać.
Ten konwerter robi to za Ciebie. Wklej plik po lewej, wybierz kierunek (ESM → CommonJS albo CommonJS → ESM) i prawy panel pokazuje ten sam kod w drugim formacie. Obsługuje osiem form, które naprawdę spotykasz w kodzie: domyślne importy, nazwane importy, namespace, side-effecty, default export, named const export, batch `export { a, b }` oraz gołe `require('x')`.
Tam, gdzie się nie da zamienić jeden do jednego (dynamiczne `require`, `__dirname` w ESM, conditional exports, top-level `await`), żółty panel ostrzeżeń mówi dokładnie, co poprawić ręcznie. Bez uploadu, bez instalacji, bez konfiguracji Babela: konwersja działa w przeglądarce w momencie, gdy przestaniesz pisać.
Jak używać
- Wybierz kierunek na górze: ESM → CommonJS, jeśli źródło ma `import` / `export`, CommonJS → ESM, jeśli ma `require` / `module.exports`.
- Wklej kod w lewy panel. Na start ładuje się przykładowy plik, żebyś od razu widział, jak wygląda wynik.
- Prawy panel pokazuje wynik od razu (auto-konwersja włączona). Wyłącz ją, jeśli chcesz najpierw doszlifować duży plik i kliknij Konwertuj, gdy będziesz gotowy.
- Skopiuj wynik przyciskiem w prawym górnym rogu panelu wyjściowego. Wklej do edytora, gotowe.
- Jeśli pod panelami pojawi się żółty panel ostrzeżeń, przeczytaj go: to linie, których konwerter nie umiał przepisać sam (dynamiczne `require`, `__dirname`, top-level `await`, mieszane eksporty). Panel pokazuje numer linii i co z nią zrobić.
- Kliknij Zamień strony, żeby przepuścić wynik z powrotem przez drugi kierunek. Przydaje się, gdy chcesz sprawdzić, że plik działa w obie strony.
- Użyj Wczytaj przykład, żeby wrzucić realistyczny przykład dla aktualnego kierunku, pomaga, gdy zapomniałeś, która forma mapuje się na którą.
Kiedy się przydaje
Siedem sytuacji, w których przepisanie między ESM a CommonJS pochłonęłoby pół godziny ręcznej roboty:
- Migracja starego projektu Node na ESM. Zespół wpisał `"type": "module"` w `package.json` i wszystkie pliki z `require` się sypią. Wklej każdy, dostań wersję ESM, wklej z powrotem. Migracja 50 plików spada z dnia do mniej-więcej godziny.
- Przeklejasz fragment z tutorialu do projektu na CommonJS. Wpis na blogu używa nowoczesnego `import x from 'pkg'`, Twój kod nadal chodzi na Node 14 / Jest 27 z klasycznym CJS. Jedno wklejenie, jedno kliknięcie, snippet pasuje do reszty.
- Wrzucasz odpowiedź na Stack Overflow albo w Slacku. Nie wiesz, którego formatu używa pytający. Skonwertuj fragment na drugi i wklej oba z krótkim opisem, który to dialekt.
- Piszesz "dual package". Publikujesz bibliotekę, która ma oba buildy: ESM i CommonJS. Piszesz raz w ESM, konwertujesz do CJS na build `.cjs`, sprawdzasz ostrzeżenia, publikujesz. Dla małych jednoplikowych paczek oszczędza konfigurację Rollupa.
- Onboarding w starszej bazie kodu. Trafiłeś do projektu, który nadal używa `module.exports`. Myślisz w `import`. Wklejaj każdy plik, czytaj wersję ESM, buduj sobie model w głowie, potem wracaj do prawdziwego kodu.
- Szybki refactor przed code review. Reviewer poprosił: "przejdźmy na ESM". Przepuść każdy plik, popraw ostrzeżenia, wystaw PR. Nudna mechaniczna część zajmuje 5 minut zamiast 50.
- Tłumaczenie różnicy juniorowi. Pokaż plik po lewej i odpowiednik po prawej. Osiem typowych form ustawionych obok siebie, łatwiejsze niż slajdy w pierwszym tygodniu pracy nowej osoby.