Babel on JavaScript-kääntäjä
Babel on työkaluketju, jota käytetään pääasiassa ECMAScript 2015+ – koodin muuntamiseen taaksepäin yhteensopivaksi versioksi JavaScriptistä nykyisissä ja vanhemmissa selaimissa tai ympäristöissä. Tässä tärkeimmät asiat, joita Babel voi sinulle tehdä:
- Muunna syntaksi
- Polyfill-ominaisuudet, jotka puuttuvat kohdeympäristöstäsi (through @babel/polyfill)
- Source code transformations (codemods)
- ja paljon muuta! (tsekkaa näistä videoista inspiraatiota)
// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});mahtava opetusohjelma kääntäjille, tsekkaa-super-tiny-kääntäjä, joka myös kertoo, miten Babel itse toimii korkealla tasolla.
ES2015 and beyond
Babelilla on tuki JavaScriptin viimeisimmälle versiolle syntaksimuuntajien kautta.
näiden liitännäisten avulla voit käyttää uutta syntaksia juuri nyt odottamatta selaintukea. Tutustu käyttöoppaaseen päästäksesi alkuun.
JSX ja React
Babel voivat muuntaa JSX-syntaksin! Tutustu meidän React preset päästä alkuun. Käytä sitä yhdessä babel-sublime-paketin kanssa tuodaksesi syntaksin korostuksen aivan uudelle tasolle.
voit asentaa tämän esiasetuksen kanssa
npm install --save-dev @babel/preset-reactja lisätä @babel/preset-react Baabelin asetuksiin.
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>; }});Learn more about JSX
Type Annotations (Flow and TypeScript)
Babel can strip out type annotations! Tutustu joko Flow-esiasetukseen tai TypeScript-esiasetukseen päästäksesi alkuun. Muista, että Babel ei tee tyyppitarkastusta; sinun on silti asennettava ja käytettävä Flow-tai TypeScript-tyyppisiä tarkistuksia.
voit asentaa flow-esiasetuksen
npm install --save-dev @babel/preset-flow// @flowfunction square(n: number): number { return n * n;}tai typescript-esiasetuksen
npm install --save-dev @babel/preset-typescriptfunction Greeter(greeting: string) { this.greeting = greeting;}Lue lisää Flow ’ sta ja konekirjoituksesta
liitännäinen
Babel on rakennettu liitännäisistä. Säveltää oma muutos putki olemassa olevia plugins tai kirjoittaa oman. Helposti käyttää joukko plugins käyttämällä tai luomalla esiasetuksen. Learn more →
luo liitännäinen lennossa astexplorer.net tai käytä generator-babel-plugin luoda plugin malli.
// 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
Source map support, joten voit debugata kootun koodin helposti.
Spec-yhteensopiva
Babel yrittää pysyä uskollisena ECMAScript-standardille niin paljon kuin kohtuudella mahdollista. Se voi myös olla erityisiä vaihtoehtoja olla enemmän spec yhteensopiva kuin tradeoff suorituskykyä.
kompakti
Babel yrittää käyttää mahdollisimman vähän koodia ilman riippuvuutta kookkaasta juoksuajasta.
Tämä voi olla vaikea tehdä tapauksissa, ja on olemassa ”löysä” vaihtoehtoja tiettyjä muunnoksia, jotka voivat tinkiä specc mukautuvuus luettavuus, Tiedoston koko, ja nopeus.