ecmascript 6 - implement - ¿Cómo consigo que Babel 6 compile a ES5 javascript?

js babel online

Question

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?

Answer 1

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.