Generator babel.config.js

Konfiguracja Babela dla nowoczesnego JavaScriptu i TypeScriptu.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Konfiguracja Babela

Targets (browserslist)

Lista docelowych środowisk, np. „> 0.5%, last 2 versions, not dead” albo „defaults”.

@babel/preset-typescript

@babel/preset-react

class-properties (loose)

Ustaw opcje i kliknij „Generuj config”.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator babel.config.js — konfiguracja transpilacji dopasowana do przeglądarek

Generator babel.config.js składa plik konfiguracyjny Babela z presetów, których naprawdę potrzebujesz. Wpisz listę docelowych środowisk, zdecyduj, czy projekt używa Reacta i TypeScriptu i czy ma obsłużyć pola klas — wynikiem jest gotowy module.exports z tablicą presets i sekcją plugins. Zamiast przepisywać składnię z pamięci, dostajesz plik gotowy do wklejenia w katalogu projektu.

Czym Babel różni się od zwykłego uruchomienia kodu

Babel to kompilator, który zamienia nowoczesny JavaScript — składnię ES2015 i nowszą, JSX, adnotacje typów — na wersję zrozumiałą dla środowiska, które ma uruchomić kod. Sam z siebie nie wie, co przekształcać: mówi mu to konfiguracja. Bez pliku ustawień Babel przepuszcza kod niemal bez zmian, więc babel.config.js jest tym miejscem, w którym deklarujesz presety i wtyczki. Preset to nazwana paczka transformacji; wtyczka to pojedyncza transformacja. Ta sama logika stoi za innymi plikami budowania — listę ignorowanych ścieżek dla repozytorium złożysz w generatorze .gitignore, zanim w ogóle dojdzie do konfiguracji kompilatora.

Co generuje to narzędzie

Wynik ma stałą strukturę: presets w kolejności, w jakiej Babel je wykonuje, oraz plugins z opcjonalną wtyczką pól klas. Przełączniki dokładają presety, a duplikaty są usuwane.

Element	Kiedy trafia do pliku	Co robi
`@babel/preset-env`	zawsze	schodzi ze składni ES2015+ do poziomu z pola `targets`
`@babel/preset-react`	gdy zaznaczysz React	przetwarza JSX; `runtime: 'automatic'` zdejmuje import Reacta z każdego pliku
`@babel/preset-typescript`	gdy zaznaczysz TypeScript	usuwa adnotacje typów bez sprawdzania poprawności
`plugin-proposal-class-properties`	gdy zaznaczysz class-properties	obsługuje pola klas w trybie `loose`

babel.config.js kontra .babelrc

Babel czyta konfigurację z dwóch rodzajów plików i różnica między nimi jest praktyczna, nie kosmetyczna. babel.config.js to konfiguracja projektowa: obowiązuje w całym drzewie, łącznie z kodem w node_modules, co ma znaczenie, gdy któraś zależność publikuje nietranspilowane źródła. .babelrc (lub .babelrc.json) jest względny wobec pliku — działa tylko w swoim katalogu i podkatalogach, a Babel przestaje go szukać po napotkaniu package.json. Dla monorepo i dla większości nowych projektów rekomendowany jest wariant projektowy, bo jedno miejsce opisuje całą kompilację. To narzędzie generuje właśnie babel.config.js. Konfigurację bliźniaczych narzędzi — konfigurację webpacka czy plik tsconfig.json — trzymasz obok, w tym samym katalogu.

Targets, browserslist i rozmiar wyniku

Pole targets jest sercem preset-env. To ono decyduje, ile transformacji zostanie użytych: im nowsze środowiska wskażesz, tym mniej Babel musi przepisywać i tym mniejszy, szybszy jest wynik. Wartość zapisujesz w składni browserslist — tej samej, której używają Autoprefixer i inne narzędzia — więc jeden zapis steruje łańcuchem budowania. Kilka typowych wartości:

defaults
> 0.5%, last 2 versions, not dead
last 2 Chrome versions
node 18

Zamiast wpisywać listę w każdym narzędziu osobno, warto przenieść ją do pola browserslist w package.json albo do pliku .browserslistrc — wtedy preset-env odczyta ją stamtąd. Wskazanie samego node 18 mówi Babelowi, że kod pójdzie na serwer, więc większość transformacji przeglądarkowych znika.

Polyfille, @babel/runtime i granica składni

Babel domyślnie przekształca składnię, a nie API. Strzałka i klasa zostaną przepisane, ale Promise czy fetch to funkcje środowiska uruchomieniowego — jeśli go w nim nie ma, sama transpilacja nie pomoże. Brakujące API dokłada się polyfillami (dziś przez core-js z opcją useBuiltIns w preset-env). Osobny problem to duplikacja: wtyczki wstawiają w każdym pliku ten sam kod pomocniczy. Pakiet @babel/runtime z @babel/plugin-transform-runtime zamienia te powtórzenia na jeden wspólny import — zauważalna oszczędność w publikowanej bibliotece.

Jak korzystać z generatora

Wpisz targets — od tej listy zależy, ile transformacji zastosuje preset-env.
Zaznacz React, jeśli w projekcie jest JSX; preset dostanie runtime: 'automatic'.
Zaznacz TypeScript, jeśli piszesz w .ts/.tsx — pamiętaj, że Babel typów nie sprawdza.
Zostaw lub odznacz wtyczkę pól klas w zależności od tego, czy jej potrzebujesz.
Kliknij Generuj config, zapisz wynik jako babel.config.js w katalogu głównym i doinstaluj wymienione presety.

Najczęściej zadawane pytania

Czy Babel sprawdza typy TypeScriptu?

Nie. @babel/preset-typescript jedynie usuwa adnotacje typów plik po pliku, żeby powstał działający JavaScript. Sprawdzanie poprawności typów zostaje po stronie kompilatora TypeScriptu (tsc --noEmit) albo edytora. To celowy podział: Babel jest szybki, bo nie analizuje typów między plikami.

Po co runtime: 'automatic' w preset-react?

W trybie automatycznym Babel sam wstawia import funkcji odpowiedzialnej za JSX, więc import React from 'react' na górze każdego komponentu przestaje być potrzebne. Kod jest krótszy, a build nie zgłasza ostrzeżeń o nieużywanym imporcie. Tryb klasyczny zostawia się tylko dla starszych wersji Reacta.

Czym różni się babel.config.js od .babelrc?

babel.config.js działa dla całego projektu, łącznie z kodem w node_modules, i jest szukany w katalogu głównym. .babelrc obowiązuje tylko w swoim katalogu i podkatalogach. Do nowych projektów i monorepo zaleca się wariant projektowy, bo jedno miejsce opisuje całą kompilację.

Czy potrzebuję Babela, skoro używam Vite lub esbuild?

Zwykle nie do samej transpilacji — Vite opiera się na esbuild, który sam obsługuje TypeScript i JSX. Babel przydaje się, gdy potrzebujesz konkretnej wtyczki, której esbuild nie ma, albo gdy celujesz w bardzo stare przeglądarki. Wtedy config z tego generatora podpina się do kroku Babela obok głównego bundlera.