javascript - implement - babel standalone

Transforma el código ES5 a ES6 en tiempo de ejecución

Question

¿Hay una opción para usar la API de babel para transformar el código javascript de ecma script 5 a ecma script 6? Quiero decir, digamos que uso el siguiente cdn

https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js

y proporciona una fuente como matriz u objeto con el código simple de ES5 y lo transforma en alguna matriz / objeto / cadena de código de ES6.

¿Es posible de alguna manera lograr esto con Babel o alguna otra herramienta?

Quiero usar algunos ejemplos de aquí, por ejemplo ... https://github.com/addyosmani/es6-equivalents-in-es5

Si pongo en código fuente ES5

[1, 2, 3].map(function(n) { return n * 2; }, this);

Se convirtió a la función de flecha en ES6.

[1, 2, 3].map(n => n * 2);

ACTUALIZAR

Lo que realmente necesito es tomar el código ES5 y cambiarlo al código ES6, puede ser a través de la API

Por ejemplo, necesito API / código abierto que haga algo como esto (mi código está en el lado izquierdo)

Enlace por ejemplo

Answer 1

¿Está buscando ES5 a ES6 o ES6 a ES5? Tu jsfiddle tiene una fuente ES6.

Recomiendo buscar en el proyecto babel-standalone en https://github.com/Daniel15/babel-standalone

He modificado su jsfiddle para transformar el código con el preajuste ES2015 que es lo que está buscando: https://jsfiddle.net/bdrg01Lg/

es tan simple como

var input = ''const getMessage = () => "Hello World";'';
var output = Babel.transform(input, { presets: [''es2015''] }).code;

Answer 2

La mejor idea es entrar en el código fuente de Lebab

Abra bin/file.js Lee todas las líneas para entender ese script.

La parte interesante es la siguiente:

 var transformer = new Transformer({transformers: transformers});
transformer.readFile(file[0]);
transformer.applyTransformations();
transformer.writeFile(program.outFile);

Más específicamente transformer.applyTransformations();

/src/transformer.js

En este archivo veo algunas funciones útiles:

 /**
* Prepare an abstract syntax tree for given code in string
*
* @param string
*/
read(string) {
this.ast = astGenerator.read(string, this.options);
}

Así que puedes usar el transformador con una cadena de código (no un archivo)

Ahora puedes aplicar las transformaciones "ES5 a ES6"

 /**
* Apply All transformations
*/
applyTransformations() {
for (let i = 0; i < this.transformations.length; i++) {
let transformation = this.transformations[i];
this.applyTransformation(transformation);
}

Y luego, vuelve a fundirlo en una cuerda

 out() {
let result = recast.print(this.ast).code;
if(this.options.formatter) {
result = formatter.format(result, this.options.formatter);
}
return result;
}

Resumen

var transformer = new Transformer({});
transformer.read(''var mySourceCode = "in ES5"'');
transformer.applyTransformations();
console.log(transformer.out());

Demostración de JSFiddle here

Si no desea todas las transformaciones, puede elegir lo que quiera con las opciones:

var transformers = {
classes: false,
stringTemplates: false,
arrowFunctions: true,
let: false,
defaultArguments: false,
objectMethods: false,
objectShorthands: false,
noStrict: false,
importCommonjs: false,
exportCommonjs: false,
};
var transformer = new Transformer({transformers: transformers});

Demostración de JSFiddle con opciones.

Answer 3

Para cambiar ES5 a ES6, puede utilizar este https://www.npmjs.com/package/xto6

Tienes que instalarlo

npm install -g xto6

Y luego solo

xto6 es5.js -o es6.js

También hay un complemento de truco https://www.npmjs.com/package/gulp-xto6 :

var gulp = require(''gulp'');
var xto6 = require(''gulp-xto6'');
gulp.task(''default'', function () {
return gulp.src(''path/to/fixtures/es5/*.js'')
.pipe(xto6())
.pipe(gulp.dest(''path/to/fixtures/es6/''));
});