在運行時將 ES5 代碼轉換為 ES6

Question

是否可以選擇使用 babel API 將 javascript 代碼從 ecma 腳本 5 轉換為 ecma 腳本 6？ 我的意思是說我使用以下 cdn

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

並使用簡單的 ES5 代碼提供像數組或對象這樣的源，並將其轉換為 ES6 代碼的某些數組/對象/字符串？

是否有可能用 babel 或其他工具以某種方式實現這一目標？

我的意思是使用這里的一些例子.. 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/開源（我的代碼在左側）

鏈接例如

Answer 1

最好的辦法是進入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演示在這里

如果您不想要所有轉換，您可以使用選項選擇您想要的：

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 演示

Answer 2

要將 ES5 更改為 ES6，您可以使用此https://www.npmjs.com/package/xto6

你必須安裝它

npm install -g xto6

然后只是：

xto6 es5.js -o es6.js

還有 gulp 插件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/'));
});

Answer 3

您是在尋找 ES5 到 ES6 還是 ES6 到 ES5？ 你的 jsfiddle 有一個 ES6 源代碼。

我建議查看https://github.com/Daniel15/babel-standalone上的 babel-standalone 項目

我修改了你的 jsfiddle 以使用 ES2015 預設轉換代碼，這就是你要找的： https ://jsfiddle.net/bdrg01Lg/

就這么簡單

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

Answer 4

對於只想在線將ES5代碼轉換為ES6 。 使用Lebab 現場演示，只需粘貼您的代碼，它將被轉換為ES6 。