Buscar..
Introducción
Transpiling es el proceso de interpretar ciertos lenguajes de programación y traducirlos a un idioma específico. En este contexto, el transpiling tomará los idiomas de compilación a JS y los traducirá al idioma de destino de Javascript.
Observaciones
Transpiling es el proceso de convertir el código fuente en código fuente, y esta es una actividad común en el desarrollo de JavaScript.
Las funciones disponibles en las aplicaciones JavaScript comunes (Chrome, Firefox, NodeJS, etc.) a menudo se quedan rezagadas con respecto a las últimas especificaciones de ECMAScript (ES6 / ES2015, ES7 / ES2016, etc.). Una vez que se haya aprobado una especificación, seguramente estará disponible de forma nativa en futuras versiones de aplicaciones de JavaScript.
En lugar de esperar nuevas versiones de JavaScript, los ingenieros pueden comenzar a escribir código que se ejecutará de forma nativa en el futuro (pruebas de futuro) mediante el uso de un compilador para convertir el código escrito para las especificaciones más recientes en código compatible con las aplicaciones existentes. Transpilers comunes incluyen Babel y Google Traceur .
Los transpilers también se pueden usar para convertir de otro lenguaje como TypeScript o CoffeeScript a JavaScript "vainilla" normal. En este caso, la transcripción de conversiones de un idioma a otro idioma.
Introducción a Transpiling
Ejemplos
ES6 / ES2015 a ES5 (a través de Babel ) :
Esta sintaxis de ES2015
// ES2015 arrow function syntax
[1,2,3].map(n => n + 1);
Se interpreta y traduce a esta sintaxis de ES5:
// Conventional ES5 anonymous function syntax
[1,2,3].map(function(n) {
return n + 1;
});
CoffeeScript a Javascript (a través del compilador incorporado de CoffeeScript) :
Este CoffeeScript
# Existence:
alert "I knew it!" if elvis?
Se interpreta y traduce a Javascript:
if (typeof elvis !== "undefined" && elvis !== null) {
alert("I knew it!");
}
¿Cómo transpile?
La mayoría de los lenguajes de compilación a Javascript tienen un transpiler incorporado (como en CoffeeScript o TypeScript). En este caso, es posible que solo necesite habilitar el transpiler del idioma a través de la configuración o una casilla de verificación. La configuración avanzada también se puede establecer en relación con el transpiler.
Para el transpiling de ES6 / ES2016 a ES5 , el transpiler más prominente que se usa es Babel .
¿Por qué debería transpilar?
Los beneficios más citados incluyen:
- La capacidad de utilizar sintaxis más nueva de forma fiable
- Compatibilidad entre la mayoría, si no todos los navegadores
- Uso de funciones nativas faltantes / aún no nativas en Javascript a través de lenguajes como CoffeeScript o TypeScript
Comienza a usar ES6 / 7 con Babel
El soporte del navegador para ES6 está creciendo, pero para asegurarse de que su código funcione en entornos que no lo admiten completamente, puede usar Babel , el transpiler de ES6 / 7 a ES5, ¡ pruébelo!
Si desea usar ES6 / 7 en sus proyectos sin tener que preocuparse por la compatibilidad, puede usar Node y Babel CLI
Configuración rápida de un proyecto con Babel para soporte ES6 / 7
- Descargar e instalar Node
- Vaya a una carpeta y cree un proyecto con su herramienta de línea de comandos favorita
~ npm init
- Instalar Babel CLI
~ npm install --save-dev babel-cli
~ npm install --save-dev babel-preset-es2015
- Cree una carpeta de
scriptspara almacenar sus archivos.js, y luego una carpetadist/scriptsdonde se almacenarán los archivos totalmente compatibles transpilados. - Cree un archivo
.babelrcen la carpeta raíz de su proyecto y escríbalo en él.
{
"presets": ["es2015"]
}
- Edite su archivo
package.json(creado cuando ejecutónpm init) y agregue el script debuilda la propiedad descripts:
{
...
"scripts": {
... ,
"build": "babel scripts --out-dir dist/scripts"
},
...
}
- Disfruta de la programación en ES6 / 7
- Ejecuta lo siguiente para transpilar todos tus archivos a ES5
~ npm run build
Para proyectos más complejos es posible que desee echar un vistazo a Gulp o Webpack