Babel es un compilador de JavaScript
Babel es una cadena de herramientas que se utiliza principalmente para convertir código ECMAScript 2015+ en una versión compatible con versiones anteriores de JavaScript en navegadores o entornos actuales y antiguos. Estas son las principales cosas que Babel puede hacer por usted:
- Sintaxis de transformación
- Características de relleno de polietileno que faltan en su entorno de destino (a través de @babel/relleno de polietileno)
- Transformaciones de código fuente (codemods)
- Y más! (echa un vistazo a estos videos para inspirarte)
// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});Para obtener un tutorial impresionante sobre compiladores, echa un vistazo al compilador súper pequeño, que también explica cómo Babel funciona a un alto nivel.
ES2015 y más allá
Babel tiene soporte para la última versión de JavaScript a través de transformadores de sintaxis.
Estos complementos le permiten usar una nueva sintaxis, ahora mismo sin esperar el soporte del navegador. Consulte nuestra guía de uso para comenzar.
JSX y React
¡Babel puede convertir la sintaxis JSX! Echa un vistazo a nuestro preajuste React para comenzar. Úselo junto con el paquete babel-sublime para llevar el resaltado de sintaxis a un nivel completamente nuevo.
Puede instalar este preset con
npm install --save-dev @babel/preset-react y agregar @babel/preset-react a su configuración de 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>; }});Aprender más acerca de JSX
Tipo de Anotaciones (Flujo y los Manuscritos)
Babel puede quitar tipo de anotaciones! Echa un vistazo a nuestro preajuste de flujo o preajuste de TypeScript para comenzar. Tenga en cuenta que Babel no realiza la comprobación de tipos; aún tendrá que instalar y usar Flow o TypeScript para comprobar los tipos.
Se puede instalar el flujo preestablecido con el
npm install --save-dev @babel/preset-flow// @flowfunction square(n: number): number { return n * n;}o la transcripción de preset con el
npm install --save-dev @babel/preset-typescriptfunction Greeter(greeting: string) { this.greeting = greeting;}Aprender más sobre el Flujo y el Manuscrito
Conectables
Babel, está construido de plugins. Componga su propia canalización de transformación utilizando complementos existentes o escriba los suyos propios. Utilice fácilmente un conjunto de complementos mediante el uso o la creación de un ajuste preestablecido. Más información →
Crear un plugin sobre la marcha con astexplorer.net o utilice generator-babel-plugin para generar una plantilla de plugin.
// 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(''); } } };}Depurable
Compatibilidad con mapas de origen para que pueda depurar su código compilado con facilidad.
Compatible con especificaciones
Babel intenta mantenerse fiel al estándar ECMAScript, tanto como sea razonablemente posible. También puede tener opciones específicas para cumplir más con las especificaciones como compensación por el rendimiento.
Compacto
Babel intenta usar la menor cantidad de código posible sin depender de un tiempo de ejecución voluminoso.
Esto puede ser difícil de hacer en casos, y hay opciones «sueltas» para transformaciones específicas que pueden compensar el cumplimiento de las especificaciones para legibilidad, tamaño de archivo y velocidad.