javascript - 在运行时将 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/开源来执行类似的操作(我的代码位于左侧)

Link for example

Answer 1

最好的主意是进入 source code的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 演示 here

如果您不想要所有转换，您可以使用选项选择您想要的转换:

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