Babel jest kompilatorem JavaScript
Babel jest toolchainem używanym głównie do konwersji kodu ECMAScript 2015+ na wstecznie kompatybilną wersję JavaScript w obecnych i starszych przeglądarkach lub środowiskach. Oto główne rzeczy, które Babel może dla Ciebie zrobić:
- przekształć składnię
- funkcje Polyfill, których brakuje w Twoim środowisku docelowym (poprzez @babel/polyfill)
- transformacje kodu źródłowego (codemods)
- i wiele więcej!
// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});aby uzyskać niesamowity samouczek na temat kompilatorów, sprawdź-super-tiny-compiler, który wyjaśnia również, jak sam Babel działa na wysokim poziomie.
ES2015 i inne
Babel ma wsparcie dla najnowszej wersji JavaScript poprzez transformatory składniowe.
te wtyczki pozwalają na użycie nowej składni, już teraz bez czekania na wsparcie przeglądarki. Zapoznaj się z naszym przewodnikiem użytkowania, aby rozpocząć.
JSX i React
Babel mogą konwertować składnię JSX! Sprawdź nasze react preset, aby rozpocząć. Użyj go razem z pakietem babel-sublime, aby przenieść podświetlanie składni na zupełnie nowy poziom.
możesz zainstalować to ustawienie za pomocą
npm install --save-dev @babel/preset-reacti dodać@babel/preset-react do konfiguracji Babel.
export default React.createClass({ getInitialState() { return { num: this.getRandomNumber() }; }, getRandomNumber() { return Math.ceil(Math.random() * 6); }, render() { return <div> Your dice roll: {this.state.num} </div>; }});Dowiedz się więcej o JSX
adnotacje typu (Flow i TypeScript)
Babel może usuwać adnotacje typu! Aby rozpocząć, zapoznaj się z naszym ustawieniem przepływu lub ustawieniem maszynopisu. Pamiętaj, że Babel nie sprawdza typów; nadal będziesz musiał zainstalować i używać Flow lub TypeScript do sprawdzania typów.
możesz zainstalować preset przepływu za pomocą
npm install --save-dev @babel/preset-flow// @flowfunction square(n: number): number { return n * n;}lub preset maszynopisu za pomocą
npm install --save-dev @babel/preset-typescriptfunction Greeter(greeting: string) { this.greeting = greeting;}Dowiedz się więcej o Flow i TypeScript
pluggable
Babel jest zbudowany z wtyczek. Skomponuj własny potok transformacji za pomocą istniejących wtyczek lub napisz własny. Łatwo użyj zestawu wtyczek, używając lub tworząc ustawienie wstępne. Dowiedz się więcej →
Stwórz wtyczkę w locie za pomocą astexplorer.net lub użyj generator-babel-plugin, aby wygenerować szablon wtyczki.
// A plugin is just a functionexport default function ({types: t}) { return { visitor: { Identifier(path) { let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split('').reverse().join(''); } } };}możliwość debugowania
obsługa map źródłowych, dzięki czemu można łatwo debugować skompilowany kod.
Spec zgodny
Babel stara się pozostać wiernym standardowi ECMAScript, w miarę możliwości. Może również mieć określone opcje, aby być bardziej zgodnym ze specyfikacją jako kompromis w stosunku do wydajności.
Compact
Babel próbuje użyć jak najmniejszej ilości kodu bez zależności od nieporęcznego środowiska uruchomieniowego.
może to być trudne do zrobienia w przypadkach, a istnieją „luźne” opcje dla konkretnych przekształceń, które mogą zmniejszyć zgodność ze specyfikacją pod względem czytelności, rozmiaru pliku i szybkości.