ecmascript 6 - implement - ¿Cómo consigo que Babel 6 compile a ES5 javascript?
js babel online (1)
He instalado la última versión de babel. Actualmente 6.4.0. Creo un archivo llamado myclass.js que tiene el siguiente código.
class MyClass {
constructor(name) {
console.log("I am a MyClass object .. ", name);
}
}
var myclass = new MyClass(''1234'');
Después de crear mi clase, hago lo siguiente en la línea de comando.
$> babel ./src/myclass.js --out-file ./out/app.js
Esperaría que mi archivo app.js tenga javascript compilado es5 pero tiene el mismo código exacto que el archivo myclass.js. ¿Qué me estoy perdiendo que pueda estar causando esto?
No le dice a Babel que apunte a ES5, elige los preajustes / complementos necesarios que lo hacen por usted.
Por ejemplo, si usa el preajuste
es2015
, esto compilará el código ES6 en un código compatible con ES5.
No especificas un "objetivo".
La siguiente guía lo guiará a través del uso de Babel para transformar el código ES6 en código que pueda ejecutarse en un entorno que admita ES <= 5.
0. Una nota sobre los cambios de API de Babel 5
En la documentación para Babel 6 :
El paquete babel ya no existe. Anteriormente, era el compilador completo y todas las transformaciones más un montón de herramientas de CLI, pero esto condujo a descargas innecesariamente grandes y fue un poco confuso. Ahora lo hemos dividido en dos paquetes separados: babel-cli y babel-core.
Y:
Babel 6 se envía sin transformaciones predeterminadas, por lo que cuando ejecute Babel en un archivo, simplemente lo imprimirá sin cambiar nada.
______
1. Instalar
babel-cli
Primero, como en los documentos, debe instalar
babel-cli
:
$ npm install babel-cli
______
2. Defina preajustes en
.babelrc
En segundo lugar, debe usar un
.babelrc
(
docs
) local para sus archivos y definir explícitamente los
ajustes preestablecidos
que desea que Babel use.
Por ejemplo, para las funciones de ES6 +, use el valor
predeterminado
env
.
... un ajuste preestablecido inteligente que le permite utilizar el último JavaScript sin necesidad de microgestión de las transformaciones de sintaxis (y, opcionalmente, polyfills del navegador) que necesita su entorno (s) de destino.
Instalarlo:
npm install @babel/preset-env
Y luego declararlo en su
.babelrc
:
{
"presets": ["@babel/preset-env"]
}
Nota:
si está utilizando Babel 7.x, puede preferir utilizar una "configuración de todo el proyecto" (
babel.config.js
) (
docs
) que "se aplica ampliamente, incluso permitiendo que los complementos y ajustes preestablecidos se apliquen fácilmente a los archivos en node_modules o en paquetes enlazados ".
______
3. Ejecute
babel
Ahora ejecutar el comando
babel
como en su ejemplo debería funcionar:
$> babel ./src/myclass.js --out-file ./out/app.js
Alternativamente, use un paquete como webpack , rollup o browserify , con su respectivo complemento babel.