co je Babel?

Babel je JavaScript kompilátor

Babel je toolchain, který se používá především pro převod ECMAScript 2015+ kód do zpětně kompatibilní verze Javascriptu v současné a starší prohlížeče nebo prostředí. Zde jsou hlavní věci, Babel může udělat pro vás:

• Transformace syntaxe
• Polyfill funkce, které chybí v cílovém prostředí (prostřednictvím @babel/polyfill)
• Zdrojový kód transformace (codemods)
• A další! (podívejte se na tyto videa pro inspiraci)

// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});

Pro skvělý návod na to, kompilátory, podívejte se na-super-tiny-kompilátor, který také vysvětluje, jak Babel sám pracuje na vysoké úrovni.

ES2015 a za

Babel má podporu pro nejnovější verzi JavaScript prostřednictvím syntaxe transformers.

tyto pluginy umožňují používat novou syntaxi, právě teď bez čekání na podporu prohlížeče. Podívejte se na náš návod k použití, abyste mohli začít.

JSX a React

Babel může převést syntaxi JSX! Podívejte se na naše React preset, abyste mohli začít. Použijte jej společně s balíčkem babel-sublime, abyste zvýraznili syntaxi na zcela novou úroveň.

tuto předvolbu můžete nainstalovat pomocí

npm install --save-dev @babel/preset-react

a přidat @babel/preset-react do konfigurace 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>; }});

Dozvědět se více o JSX

Typ Poznámky (Průtok a Strojopis)

Babel může vyřadit typ anotací! Chcete-li začít, podívejte se na naši předvolbu toku nebo předvolbu strojopisu. Mějte na paměti, že Babel neprovádí kontrolu typu; stále budete muset nainstalovat a používat Flow nebo TypeScript ke kontrole typů.

můžete nainstalovat průtok přednastavení

npm install --save-dev @babel/preset-flow

// @flowfunction square(n: number): number { return n * n;}

nebo strojopisu preset

npm install --save-dev @babel/preset-typescript

function Greeter(greeting: string) { this.greeting = greeting;}

Dozvědět se více o Toku a Strojopis

Zásuvné

Babel je postaven z pluginů. Vytvořte si vlastní transformační potrubí pomocí existujících pluginů nebo napište vlastní. Snadno použijte sadu pluginů pomocí nebo vytvořením předvolby. Další informace →

Vytvořte plugin za běhu s astexplorer.net nebo použijte generátor-babel-plugin pro generování šablony pluginu.

// 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(''); } } };}

Debuggable

podpora zdrojové mapy, takže můžete snadno ladit kompilovaný kód.

Spec kompatibilní

Babel se snaží zůstat věrný standardu ECMAScript, co nejvíce rozumně možné. To může mít také specifické možnosti, aby se více spec kompatibilní jako kompromis k výkonu.

Compact

Babel se snaží použít co nejmenší množství kódu bez závislosti na objemném běhu.

To může být obtížné dělat v případech, a tam jsou „volné“ možnosti pro konkrétní transformace, které mohou kompromis spec poddajnost pro čitelnost, velikost a rychlost.