有一个选项可以使用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 /开源这样做(我的代码在左侧)
答案 0 :(得分:9)
最好的办法是进入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 demo 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 demo with options
答案 1 :(得分:5)
要将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/'));
});
答案 2 :(得分:0)
您是在寻找ES5到ES6还是ES6到ES5?你的jsfiddle有一个ES6源。
我建议您在https://github.com/Daniel15/babel-standalone
上查看babel-standalone项目我修改了你的jsfiddle,用你想要的ES2015预设代码转换代码:https://jsfiddle.net/bdrg01Lg/
就像
一样简单app_test.php
答案 3 :(得分:0)
仅用于将在线ES5
转换为ES6
的人。使用Lebab live demo,只需粘贴您的代码,它将被转换为ES6
。