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/''));
});