Преобразование кода ES5 в ES6 во время выполнения

Question

Преобразование кода ES5 в ES6 во время выполнения

Есть возможность использовать babel API для преобразования кода javascript из сценария ecma 5 в сценарий ecma 6?
Я имею в виду, допустим, я использую следующий cdn

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

И предоставить такой источник, как массив или объект с простым кодом ES5, и он преобразует его в некоторый массив / объект / строку кода ES6?

Можно ли как-то добиться этого с помощью Вавилона или какого-то другого инструмента?

Я хочу привести несколько примеров. отсюда, например..
https://github.com/addyosmani/es6-equivalents-in-es5

Если я вставлю исходный код ES5

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

Он преобразован в функцию стрелки в ES6

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

Обновить

На самом деле мне нужно взять код ES5 и изменить его на код ES6, это может быть через api

Например, мне нужен API / open source, который делает что-то вроде этого (мой код находится в левой части)

Ссылка например

717 3

javascript babeljs ecmascript-6

3 ответов:

Comments

Ничего не найдено.

Hugeen · Accepted Answer · 2017-08-31 15:33:28

Лучше всего перейти к исходному коду Lebab

Откройте bin/file.js . Прочитайте все строки, чтобы понять этот сценарий.

Интересная часть заключается в следующем:
  var transformer = new Transformer({transformers: transformers});
  transformer.readFile(file[0]);
  transformer.applyTransformations();
  transformer.writeFile(program.outFile);
Более конкретно transformer.applyTransformations();
Давайте откроем /src/transformer.js
В этом файле я вижу некоторые полезные функции:
  /**
   * Prepare an abstract syntax tree for given code in string
   *
   * @param string
   */
  read(string) {

    this.ast = astGenerator.read(string, this.options);

  }
Таким образом, вы можете использовать трансформатор со строкой кода (а не с файлом)
Теперь вы можете применить преобразования "ES5 в ES6"
  /**
   * Apply All transformations
   */
  applyTransformations() {

    for (let i = 0; i < this.transformations.length; i++) {
      let transformation = this.transformations[i];
      this.applyTransformation(transformation);

    }
И затем, переделать его в строку
  out() {
    let result = recast.print(this.ast).code;

    if(this.options.formatter) {
      result = formatter.format(result, this.options.formatter);
    }

    return result;
  }
Резюме
var transformer = new Transformer({});
transformer.read('var mySourceCode = "in ES5"');
transformer.applyTransformations();
console.log(transformer.out());
Jsfiddle demo здесь

Если вы не хотите все преобразования, вы можете выбрать то, что вы хотите с опциями:
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});
Jsfiddle demo с опциями

Krzysztof Sztompka · Accepted Answer · 2016-01-28 21:50:27

Чтобы изменить ES5 на ES6, вы можете использовать это https://www.npmjs.com/package/xto6

Вы должны установить его
npm install -g xto6
А потом просто:
xto6 es5.js -o es6.js
Существует также плагин залпом 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/'));
});

Jerome WAGNER · Accepted Answer · 2016-01-28 22:03:24

Вы ищете ES5 для ES6 или ES6 для ES5 ? Ваш jsfiddle имеет источник ES6.

Я бы рекомендовал изучить проект babel-standalone на https://github.com/Daniel15/babel-standalone

Я модифицировал ваш jsfiddle для преобразования кода с помощью предустановки ES2015, это то, что вы ищете: https://jsfiddle.net/bdrg01Lg/

Это так же просто, как
var input = 'const getMessage = () => "Hello World";';
var output = Babel.transform(input, { presets: ['es2015'] }).code;