Comienza con Babel 7

JavaScript es único debido a la amplitud del ecosistema. Si bien los nuevos estándares agregan azúcar sintáctica, los admitidos en los navegadores llevan tiempo. Babel trabaja alrededor de este problema a través de la transpiración automática.

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

El lanzamiento inicial de Babel tomó el mundo por la tormenta. Poco después apareció por primera vez, varios marcos como reaccionar, Vue y Ember lo adoptaron. Los desarrolladores a menudo usan el producto sin saber que funciona en el fondo, más de un proyecto popular de NPM tiene una dependencia de Babel.

• Cómo hacer una aplicación

Estas dependencias transformaron el proceso de liberación del predecesor en un asunto lleno de conflictos. La versión 7, aún administrada por un pequeño equipo de mantenedor, así lo intentó ser lo más compatible posible. Los cambios de rotura son pocos y distantes entre sí, mientras que la calidad de la generación de código sigue siendo alta (si está trabajando con un equipo, guardando documentos en almacenamiento en la nube Te ayudará a mantenerte cohesivo).

Si no ha trabajado con Babel antes, deje que este sea su guía. Poder usar las características avanzadas de Javascript sin compatibilidad Las preocupaciones facilitan la vida mucho más fácil.

¿Le gustaría algunas herramientas para agilizar su proceso? Nuestra guía de lo mejor. Creador de sitios web ayudará. ¿Quieres apoyo a largo plazo? Conseguir el derecho Alojamiento web Servicio.

01. Verificación de la versión

Babel suele vivir en el entorno de tiempo de ejecución del nodo. Vamos a empezar marcando las versiones utilizadas. La salida proporciona el estado de la versión que se encuentra en la estación de trabajo Ubuntu 14.04 utilizada para crear el siguiente artículo. Esto no es pedantería: la figura que acompaña a este paso muestra que el equipo de Babel dejó caer el apoyo a las versiones de bastante nodo.js.

 Tamhan @ Tamhan-ThinkPad: ~ $ Nodo --version
v8.14.0
Tamhan @ Tamhan-ThinkPad: ~ $ NPM --version
6.4.1 

02. CAMBIO DE NOMBRES DE PAQUETES

Un cambio de rotura en la versión 7 ha implicado mover los paquetes de Babel a su propio espacio de nombres. Los paquetes más antiguos no fueron eliminados de los diversos repositorios. Esto es importante, ya que el uso de los nombres de los paquetes heredados conduce a la situación que se muestra en la figura que acompaña a este paso.

 Tamhan @ Tamhan-ThinkPad: ~ / Workspaceb7 $ NPM
instalar --save-dev @ babel / núcleo @ babel / cli @
Babel / Preset-env @ babel / nodo
. . .
+ @ babel / core @ 7.2.0
+ @ babel / nodo @ 7.2.0
+ @ babel / cli @ 7.2.0
+ @ babel / preset-env @ 7.2.0 

03. Añadir una acción de compilación

El paso anterior supone que trabaja dentro de un proyecto NPM. En ese caso, correr Babel a través de la acción de construcción es fácil. Abierto Package.json y modifíquelo como se demuestra en el código a continuación:

 {
. . .
"Main": "index.js",
"guiones": {
"Prueba": "Echo \" Error: No hay prueba
especificado \ "& amp; & amp; salida 1",
"Construir": "babel index.js -d lib"

}, 

04. Código de transpiro a mano.

Poner a Babel al trabajo implica disparar la acción de construcción. Esto se realiza mejor a través del comando de ejecución de NPM. los -D El valor informa a Babel que los resultados deben ser colocados en el lib Carpeta: la figura que acompaña a este paso muestra que la carpeta se crea sobre la marcha.

 Tamhan @ Tamhan-ThinkPad: ~ / Workspaceb7 $ NPM
construir
& gt; [email protected] Build / Home / Tamhan /
Workspaceb7
& gt; babel index.js -d lib
Compilado con éxito 1 archivo con Babel. 

05. Una cuestión de configuración.

Invocar a Babel sin más opciones de configuración no permite la transpiración. El código se puede transpirar solo si el marco 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 creando un archivo llamado .babelrc en la raíz del proyecto.

06. Configurar el Babelrc

Babel se configura a través de un conjunto de complementos, cada uno de los cuales aplica la transpilación se transforma en la base de código. Utilizamos el preet-env Paquete: viene con un conjunto preconfigurado de transformaciones destinadas a cubrir la mayoría de las bases.

 {
"Presets": ["@ babel / preset-env"]
} 

07. Tiempo para una prueba de manejo

Agregue un poco de javascript de nueva edad a index.js para probar el programa contra algún código en vivo. El código que acompaña a este paso no funcionaría en los navegadores heredados, cuando se realizan, la función implícita se reemplaza con un normal Declaración, como se muestra en la figura.

 FUNCIÓN TAMSTEST () {
[1, 2, 3] .map ((n) = & gt; n + 1);
} 

08. Ajustar la orientación

preet-env Aplica la mayoría de las transpilaciones de forma predeterminada: el objetivo del producto es crear un JavaScript universalmente compatible sin tener en cuenta el ancho de banda y los costos de rendimiento. Puedes cambiar su configuración pasando en un objetivos Objeto: el ejemplo a continuación se dirige las versiones específicas de Chrome e IE.

 {
"Preajustes": [
[
"@ babel / preset-env",
{
"Objetivos": {
"Chrome": "58",
"IE": "11"
}
}
]
]
} 

09. FUERA AVANZADA

La orientación del navegador de Babel no se limita a Chrome e Internet Explorer. Gracias a la cooperación con lista de navegadores Los desarrolladores pueden mezclar y combinar desde más de una docena de objetivos, como se muestra a continuación.

Los nombres son insensibles de la caja:

• Androide Para Android WebView.
• Baidu Para el navegador de Baidu.
• Mora o cama y desayuno para BlackBerry Browser.
• Cromo para Google Chrome.
• Chromeandroid o and_chr Para Chrome para Android.
• Borde para Microsoft Edge.
• Electrón para el marco de electrones. Se convertirá a la versión de Chrome.
• Explorador o es decir para Internet Explorer.
• Explorererobilo o IE_MOB Para Internet Explorer Mobile.
• Firefox o ff para Mozilla Firefox.
• Firefoxandroid o y_ff Para Firefox para Android.
• iOS o ios_saf para iOS safari.
• Nodo para nodos.js.opera para la ópera.
• Mini Opera o op_mini para Opera Mini.
• Operambile o op_mob para Opera Mobile.
• Qqandroid o and_qq Para el navegador QQ para Android.
• Safari para Safari de escritorio.
• Samsung para Samsung internet.
• Ucandroid o and_uc Para el navegador UC para Android.

10. FUNCIONAL AVANZADA, PARTE DOS

La lista de navegación 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 usar dentro de Babel modificando babelrc . Las consultas se pueden evaluar localmente si su estación de trabajo tiene instalada NPX.

 {
"Objetivos": "& gt; 0.25%, no muerto"
} 

11. TRANSPILACIÓN AUTOMÁTICA

Tener que invocar Babel a mano se pone tedioso rápidamente. El Nodemon Utility supervisa los recursos del sistema de archivos y dispara los comandos de desactivación a medida que los cambios se detectan. En teoría, agregar el soporte de Nodemon se maneja a través de un pequeño cambio para Package.json .

 {
"Nombre": "Workspaceb7",
. . .
"Main": "index.js",
"guiones":
{
"Inicio": "Nodemon - EXEC BABEL-NODE
index.js ", 

12. Compruebe la presencia

Algunas estaciones de trabajo tienen nodo instalado a nivel mundial. Si este no es el caso, invocar el programa producirá un mensaje de error similar al que se muestra a continuación. Afortunadamente, desplegando nodo se logra fácilmente a través de la NPM Install mando.

 Tamhan @ Tamhan-ThinkPad: ~ / Workspaceb7 $ NPM
Instalar --Save-dev Nodemon 

13. Revise la funcionalidad

Dispara Inicio de NPM en una ventana de terminal y proceder a cambiar el contenido de index.js con un editor como GEDIT o Código Visual Studio . Después de ahorrar, nodo Información de estado de salida.

 [Nodemon] Reinicio debido a cambios ...
[NODEMON] INICIO` NABEL-NODE INDEXT.JS`
[Nodemon] Salida limpia - esperando cambios
Antes de reiniciar 

14. Fijar la transpiración.

Mientras nodo La detección de la detección debe trabajar perfectamente en este punto, los contenidos de la index.js archivo que se encuentra en lib no actualices. Esto es causado por una amabilidad de nodo babel - No compromete los archivos transpirados al disco. En su lugar, se dispara de una versión modificada del CLI del nodo, que funciona con los archivos transpirados.

15. Código de transpiro programáticamente

Babel no está limitado a trabajar en la línea de comandos. Si se instalan los paquetes correctos, el código también se puede transpirar de 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, generalmente, se obtienen de un babelrc expediente.

 var babel = requieren ("@ babel / núcleo");
Importar {transform} de "@ babel / núcleo";
Importación * como Babel de "@ babel / núcleo";
babel.transform ("código ();", opciones,
función (error, resultado) {
Resultado.Code;
resultado.map;
Resultados;
}); 

16. transpire archivos enteros

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

 babel.transformfile ("filename.js", opciones,
función (error, resultado) {
resultado; // = & gt; {código, mapa, ast}
}
); 

17. Sincronización y Async

Babel 7 introdujo versiones síncronas y asíncronas de la mayoría de las llamadas API. Asegúrese de elegir el adecuado para sus necesidades, mientras que los pequeños ejemplos de Transpiling se pueden realizar sobre la marcha, la configuración de Babel suelta en archivos más complejos puede conducir fácilmente a los retrasos que se ejecutan en docenas de segundos.

18. Aprender sobre complementos individuales.

Si alguna vez te encuentres preguntándote sobre lo que sucede en el fondo, simplemente visita esta página . Proporciona una lista de todos los complementos actualmente contenidos en la distribución de Babel, y también contiene algunos consejos para todos aquellos que buscan crear un complemento propio.

19. Strip Out Typescript detalles

Babel no se limita a transponar elementos de javascript de nueva edad. El producto contiene un motor TypeScript restringido por características. Tira de la tecla de mecanografía y reemplaza los elementos avanzados. Lamentablemente, Babel no realiza la verificación de tipo: esto elimina uno de los beneficios más significativos del lenguaje Typescript.

 {
"Presets": ["@ babel / preset-tipscript"]
} 

20. Ejecutar Babel online

Si bien las operaciones de transpiración generalmente funcionan sin problemas, a veces se producen problemas. En ese caso, el Babel rewn es útil. Ejecuta Babel en el navegador de su estación de trabajo y muestra información y salida justo al lado del otro.

21. Aprende sobre los puntos de dolor.

Nuestra introducción explicó que Babel ve un uso generalizado en diversos proyectos. El equipo de mantenedor de Babel simplifica las actualizaciones de la versión con un Registro de cambio detallado . Si usa Babel programáticamente, no olvide consultar a la Guía de actualización de API .

Este artículo se publicó originalmente en cuestión 283 de la revista Creative Web Design Design Diseñador web . Comprar emito 283 aquí o Suscríbete al diseñador web aquí .

Artículos relacionados:

• Cómo codificar más rápido, encendedor JavaScript
• 5 APIES ANTES DE JAVASCRIPT
• 27 plantillas de sitio web de primera clase