Articles /

Empieza con Babel 7

JavaScript es único debido a la amplitud del ecosistema. Mientras que los nuevos estándares añaden azúcar sintáctico, conseguir que sean compatibles con los navegadores lleva tiempo. Babel resuelve este problema mediante la transpilación automática.

La idea detrás del producto es simple: Babel toma el código ES6 o ES7 y sustituye los nuevos elementos sintácticos por código de emulación. Su salida confirma la sintaxis clásica de JavaScript y se ejecuta en navegadores antiguos como Internet Explorer.

El lanzamiento inicial de Babel tomó el mundo por sorpresa. Poco después de su aparición, varios frameworks como React, Vue y Ember lo adoptaron. Los desarrolladores suelen utilizar el producto sin saber que funciona en segundo plano: más de un proyecto npm popular tiene una dependencia de Babel.

  • Cómo hacer una app

Estas dependencias transformaron el proceso de lanzamiento del predecesor en un asunto lleno de conflictos. La versión 7, aún gestionada por un pequeño equipo de mantenedores, ha intentado ser lo más compatible posible. Los cambios de ruptura son pocos y distantes entre sí, mientras que la calidad de la generación de código sigue siendo alta (si estás trabajando con un equipo, guardar los documentos en el almacenamiento en la nube te ayudará a mantener la cohesión).

Si no has trabajado con Babel antes, deja que esta sea tu guía. Poder utilizar funciones avanzadas de JavaScript sin preocupaciones de compatibilidad facilita mucho la vida.

¿Quieres algunas herramientas para agilizar tu proceso? Nuestra guía sobre el mejor constructor de sitios web te ayudará. ¿Quieres soporte a largo plazo? Consigue el servicio de alojamiento web adecuado.

Comprobación de la versión

Babel suele vivir en el entorno de ejecución de Node. Empecemos por comprobar las versiones utilizadas. La salida proporciona el estado de la versión encontrada en la estación de trabajo Ubuntu 14.04 utilizada para crear el siguiente artículo. Esto no es una pedantería – la figura que acompaña a este paso muestra que el equipo de Babel dejó de dar soporte a bastantes versiones de Node.js.

tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1

Cambio de nombres de paquetes

Un cambio de ruptura en la versión 7 ha implicado el traslado de los paquetes de Babel a su propio espacio de nombres. Los paquetes más antiguos no se han eliminado de los distintos repositorios. Esto es importante, ya que el uso de nombres de paquetes antiguos lleva a la situación que se muestra en la figura que acompaña a este paso.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]

Añadir una acción de compilación

El paso anterior asume que se trabaja dentro de un proyecto npm. En ese caso, ejecutar Babel a través de la acción de construcción es fácil. Abre el archivo package.json y modifícalo como se muestra en el siguiente código:

{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},

Transpila el código a mano

Poner a trabajar a Babel implica disparar la acción de construcción. Esto se logra mejor a través del comando npm run. El valor -d informa a Babel de que los resultados deben colocarse en la carpeta lib – la figura que acompaña a este paso muestra que la carpeta se crea sobre la marcha.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.

Una cuestión de configuración

Invocar a Babel sin más opciones de configuración no permite la transpilación. El código puede ser transpilado sólo si el framework recibe más información sobre el entorno de destino. Esto se puede hacer a través de un parámetro de línea de comandos, o mediante la creación de un archivo llamado .babelrc en la raíz del proyecto.

Configurar el babelrc

Babel se configura a sí mismo a través de un conjunto de plugins, cada uno de los cuales aplica transformaciones de transpilación a la base de código. Usamos el paquete preset-env – viene con un conjunto preconfigurado de transformaciones destinadas a cubrir la mayoría de las bases.

{"presets": }

Hora de probar

Agrega un poco de JavaScript de la nueva era a index.js para probar el programa contra algún código vivo. El código que acompaña a este paso no funcionaría en los navegadores heredados – cuando se hace, la función implícita se sustituye por una declaración normal, como se muestra en la figura.

function tamstest(){.map((n) => n + 1);}

Ajustar la orientación

preset-env aplica la mayoría de las transpilaciones por defecto: el objetivo del producto es crear un JavaScript universalmente compatible sin tener en cuenta los costes de ancho de banda y rendimiento. Puedes cambiar su configuración pasando un objeto targets – el ejemplo de abajo apunta a versiones específicas de Chrome e IE.

{"presets": ]}

Advanced targeting

El targeting del navegador de Babel no se limita a Chrome e Internet Explorer. Gracias a la cooperación con browserslist, los desarrolladores pueden mezclar y combinar más de una docena de objetivos, como se muestra a continuación.

Los nombres no distinguen entre mayúsculas y minúsculas:

  • Android para Android WebView.
  • Baidu para Baidu Browser.
  • BlackBerry o bb para el navegador de Blackberry.
  • Chrome para Google Chrome.
  • ChromeAndroid o and_chr para Chrome para Android.
  • Edge para Microsoft Edge.
  • Electron para Electron framework. Se convertirá a la versión de Chrome.
  • Explorer o ie para Internet Explorer.
  • ExplorerMobile o ie_mob para Internet Explorer Mobile.
  • Firefox o ff para Mozilla Firefox.
  • FirefoxAndroid o and_ff para Firefox para Android.
  • iOS o ios_saf para iOS Safari.
  • Node para Node.js.Opera para Opera.
  • OperaMini o op_mini para Opera Mini.
  • OperaMobile o op_mob para Opera Mobile.
  • QQAndroid o and_qq para QQ Browser para Android.
  • Safari para escritorio Safari.
  • Samsung para Samsung Internet.
  • UCAndroid o and_uc para UC Browser para Android.

Advanced targeting, part two

Browserlist también puede tomar consultas avanzadas. Su página de inicio enumera las opciones de configuración, casi todas las cuales también se pueden utilizar dentro de Babel modificando babelrc. Las consultas pueden ser evaluadas localmente si su estación de trabajo tiene npx instalado.

{"targets": "> 0.25%, not dead"}

Transpilación automática

Tener que invocar Babel a mano se vuelve tedioso rápidamente. La utilidad nodemon monitoriza los recursos del sistema de archivos y lanza comandos cuando se detectan cambios. En teoría, añadir soporte para nodemon se maneja a través de un pequeño cambio en package.json.

{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",

Comprobar presencia

Algunas estaciones de trabajo tienen nodemon instalado globalmente. Si este no es el caso, al invocar el programa aparecerá un mensaje de error similar al que se muestra a continuación. Afortunadamente, el despliegue de nodemon se realiza fácilmente a través del comando npm install.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

Comprobar funcionalidad

Activa npm start en una ventana de terminal y procede a cambiar el contenido de index.js con un editor como gedit o Visual Studio Code. Después de guardar, nodemon emitirá información de estado.

 restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restart

Arreglar la transpilación

Aunque la detección de nodemon debería funcionar sin problemas en este punto, el contenido del archivo index.js que se encuentra en lib no se actualiza. Esto es causado por un detalle de babel-node – no confirma los archivos transpilados en el disco. En su lugar, lanza una versión modificada de la CLI de Node, que funciona con los archivos transpilados.

Transpilar código programáticamente

Babel no se limita a trabajar en la línea de comandos. Si se instalan los paquetes correctos, también se puede transpilar código desde otro programa. El fragmento que acompaña a este paso aplica un conjunto de transformaciones básicas a una cadena de entrada. Tenga en cuenta que los ajustes de configuración, por lo general, se obtienen de un archivo babelrc.

var babel = require("@babel/core");import { transform } from "@babel/core";import * as babel from "@babel/core";babel.transform("code();", options, function(err, result) {result.code;result.map;result.ast;});

Transpilar archivos enteros

El código fuente no suele almacenarse en variables de cadena. La API de Babel tiene en cuenta esto a través de un conjunto de funciones relacionadas con los archivos, que renuncian a la cadena de entrada para una variable con un nombre de archivo. Los resultados, sin embargo, se devuelven como una variable normal de JavaScript.

babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});

Sync y async

Babel 7 introdujo versiones síncronas y asíncronas de la mayoría de las llamadas a la API. Asegúrese de elegir la correcta para sus necesidades – mientras que la transpilación de pequeños ejemplos se puede hacer sobre la marcha, la puesta en marcha de Babel en archivos más complejos puede conducir fácilmente a los retrasos que se ejecutan en decenas de segundos.

Aprenda acerca de los plugins individuales

Si alguna vez se encuentra preguntando acerca de lo que sucede en el fondo, simplemente visite esta página. Proporciona una lista de todos los plugins contenidos actualmente en la distribución de Babel, y también contiene algunos consejos para todos aquellos que buscan crear un plugin propio.

Desaparece lo específico de TypeScript

Babel no se limita a transpilar elementos JavaScript de la nueva era. El producto contiene un motor de TypeScript de características limitadas. Elimina la información de tipado y reemplaza los elementos avanzados. Lamentablemente, Babel no realiza la comprobación de tipos – esto elimina uno de los beneficios más significativos del lenguaje TypeScript.

{"presets": }

Ejecutar Babel en línea

Aunque las operaciones de transpilación suelen funcionar sin problemas, a veces ocurren problemas. En ese caso, el REPL de Babel es útil. Ejecuta Babel en el navegador de tu estación de trabajo y muestra la entrada y la salida una al lado de la otra.

Aprende sobre los puntos de dolor

Nuestra introducción explicaba que Babel tiene un uso extendido en varios proyectos. El equipo de mantenedores de Babel simplifica las actualizaciones de versiones con un registro de cambios detallado. Si utiliza Babel mediante programación, no olvide consultar la guía de actualización de la API.

Este artículo se publicó originalmente en el número 283 de la revista de diseño web creativo Web Designer. Compre el número 283 aquí o suscríbase a Web Designer aquí.

  • Cómo codificar un JavaScript más rápido y ligero
  • 5 impresionantes API de Javascript
  • 27 plantillas de sitios web de primera clase

Leave a Reply