Babel.js 在运行时将ES5代码转换为ES6

bmp9r5qi  于 2022-12-08  发布在  Babel
关注(0)|答案(4)|浏览(296)

有一个选项可以使用babel API将javascript代码从ecma script 5转换到ecma script 6--我的意思是说我使用下面的cdn
https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js
并提供一个像数组或对象这样源代码,用简单的ES 5代码,然后将其转换为ES6代码的数组/对象/字符串?
有没有可能用巴别塔或其他工具来达到这个目的?
我打算从这里举一些例子,例如.. https://github.com/addyosmani/es6-equivalents-in-es5
如果我输入ES 5源代码

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

在ES6中转换为箭头功能

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

更新

我需要的是把ES 5代码改为ES6代码,可以通过api
例如,我需要这样的API/开放源代码(我的代码在左侧)
链接示例

t3irkdon

t3irkdon1#

最好的办法是进入Lebabsource code
打开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());

JSF中间演示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});

JSF中间演示with options

mwkjh3gx

mwkjh3gx2#

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

kd3sttzy3#

您正在寻找ES5到ES6或ES6到ES5?您的jsfiddle有一个ES6源。
我建议在https://github.com/Daniel15/babel-standalone上查看Babel独立项目
我修改了你的jsfiddle转换代码与ES2015预设它是什么,你正在寻找:https://jsfiddle.net/bdrg01Lg/
它就像

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

qncylg1j4#

对于那些只想在线将ES5代码转换为ES6的人。使用Lebab live demo,只需粘贴您的代码,它将被转换为ES6

相关问题