Babel transform

Transformuj snippet i zobacz pipeline Babel

Wklej JavaScript, JSX, TypeScript albo TSX, wybierz kontrolowany preset i pluginy Babel, a potem porównaj output, zmienione linie i opis pipeline bez wysyłania kodu na backend oraz bez wykonywania wyniku.

  • Worker w przeglądarce
  • Bez wykonywania outputu
  • Diff + pipeline

Live Babel transform

Kuratorowane presety utrzymują publiczne narzędzie w kontrolowanych granicach, ale pokazują realny output Babel.

Gotowe do transformu

Usuń adnotacje TypeScript i obniż optional chaining/nullish coalescing dla starszego targetu przeglądarkowego.

typescriptlegacymodulenone2 plugins

Źródło

Znaki źródła
140 / 51200
Linie
9
Tryb
typescript -> legacy

Output

Uruchom transform, żeby zobaczyć output Babel, zmienione linie i opis pipeline.

Użyj Babel, gdy liczy się kształt składni

Babel pomaga odpowiedzieć, jak składnia zostanie obniżona zanim kod trafi do bundlera albo runtime: optional chaining, nullish coalescing, JSX, klasy i adnotacje TypeScript potrafią zmienić się znacząco. Ten playground zawęża pytanie do jednego wklejonego fragmentu.

Transform działa w jednorazowym workerze przeglądarki. Strona nie wysyła kodu źródłowego na backend, nie ładuje pluginów z wejścia użytkownika i nie uruchamia transformowanego wyniku.

Jak czytać wynik

Presety to decyzje pipeline

preset-env obniża składnię pod target, preset-react obsługuje JSX, a preset-typescript usuwa adnotacje typów. Panel pipeline pokazuje, które rodziny były aktywne.

TypeScript tutaj to transform składni

Babel nie robi typecheckingu. Usuwa składnię TypeScript, żeby pokazać emitowany JavaScript; bezpieczeństwo typów nadal należy do TypeScript, edytora albo CI.

Output nigdy nie jest wykonywany

Playground renderuje transformowany kod jako tekst. Nie wykonuje alert, fetch, pętli, importów ani kodu pluginów, dzięki czemu publiczna trasa pozostaje kontrolowana i privacy-first.

Babel Transform FAQ

Czy to jest to samo co oficjalny Babel REPL?

Nie. To zawężone narzędzie Playground Forge z kuratorowanymi opcjami, workerem privacy-first, próbką diffu i opisem pipeline dla jednego snippetu.

Czy strona uruchamia transformowany kod?

Nie. Output jest pokazywany wyłącznie jako tekst. Narzędzie transformuje składnię, ale nie wykonuje wynikowego JavaScriptu.

Czy mogę dodać własny plugin Babel?

Nie. Własne pluginy wykonują JavaScript, więc publiczne MVP pozwala tylko na kontrolowaną listę pluginów.

Czy tryb TypeScript robi typechecking?

Nie. Babel usuwa i transformuje składnię TypeScript, a typechecking pozostaje zadaniem TypeScript, edytora albo CI.