A Babel egy JavaScript fordító
A Babel egy eszközlánc, amelyet elsősorban az ECMAScript 2015 + kód konvertálására használnak a JavaScript visszafelé kompatibilis verziójára jelenlegi és régebbi böngészőkben vagy környezetekben. Itt vannak a legfontosabb dolgok, amelyeket a Babel tehet az Ön számára:
- Transform syntax
- Polyfill funkciók, amelyek hiányoznak a célkörnyezetben (@babel / polyfill)
- forráskód transzformációk (codemods)
- stb! (nézze meg ezeket a videókat inspirációért)
// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});a fordítóprogramok fantasztikus bemutatójához nézze meg a-szuper-apró-fordítót, amely azt is elmagyarázza, hogy maga Babel hogyan működik magas szinten.
ES2015 és azon túl
Babel támogatja a JavaScript legújabb verzióját szintaxis transzformátorokon keresztül.
Ezek a bővítmények lehetővé teszik az új szintaxis használatát, most anélkül, hogy megvárná a böngésző támogatását. Nézze meg a használati útmutatót az induláshoz.
JSX and React
Babel can convert JSX syntax! Nézze meg a React előre beállított kezdeni. Használja a babel-sublime csomaggal együtt, hogy a szintaxis kiemelése teljesen új szintre kerüljön.
ezt az előre beállított értéket
npm install --save-dev @babel/preset-reactés add hozzá @babel/preset-react A Babel konfigurációjához.
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>; }});Tudjon meg többet a JSX
type Annotations (Flow and TypeScript)
Babel is strip out type annotations! Nézze meg a folyamat előre beállított vagy TypeScript előre az induláshoz. Ne feledje, hogy a Babel nem végez típusellenőrzést; a típusok ellenőrzéséhez továbbra is telepítenie kell a Flow vagy a TypeScript alkalmazást.
a flow preset
npm install --save-dev @babel/preset-flow// @flowfunction square(n: number): number { return n * n;}vagy a typescript preset with
npm install --save-dev @babel/preset-typescriptfunction Greeter(greeting: string) { this.greeting = greeting;}Tudjon meg többet a flow and TypeScript
dugaszolható
Babel beépülő modulokból épül fel. Készítse el saját átalakítási csővezetékét meglévő bővítmények segítségével, vagy írja be a sajátját. Könnyen használható egy sor plugin segítségével vagy egy előre beállított. Tudjon meg többet →
Hozzon létre egy plugint menet közben astexplorer.net vagy használja generátor-babel-plugin generálni egy plugin sablon.
// 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
Forrástérkép támogatás, így könnyedén hibakeresheti összeállított kódját.
Spec kompatibilis
Babel megpróbál hű maradni az ECMAScript szabványhoz, amennyire ésszerűen lehetséges. Lehet, hogy speciális lehetőségekkel is rendelkezik, amelyek jobban megfelelnek a spec-nek, mint a teljesítmény kompromisszuma.
Compact
Babel megpróbálja a lehető legkevesebb kódot használni, anélkül, hogy függne a terjedelmes futási időtől.
ez esetenként nehézkes lehet, és vannak” laza ” opciók bizonyos átalakításokhoz, amelyek az olvashatóságot, a fájlméretet és a sebességet veszélyeztethetik.