将es5代码转es6代码

参考：https://github.com/lebab/lebab#safe-transforms

作用

Turn your ES5 code into readable ES6 (sugar-syntax). It does the opposite of what Babel does.
将你的 ES5 代码转换为可读的 ES6，它的做法与 Babel 相反。

安装

npm install -g lebab

使用

转换单个文件，输出转换后的代码

// file: 需要转换的文件
// transform: 需要转换的语法
lebab <file> -t <transform>

转换单个文件，另存转换后的代码

// out-file: 转换后保存代码的文件
lebab <file> -o <out-file> -t <transform>

转换目录中的文件

// dir: 需要转换的目录，可以使用正则匹配
lebab --replace <dir> -t <transform>

在代码中使用

// code: 需要转换的代码
lebab.transform(code, transform);

示例

1.将es5.js里的回调函数转换为 => :

lebab es5.js -t arrow

es5.js:

$(window).scroll(function () {
    checkScroll();
});

输出：

$(window).scroll(() => {
    checkScroll();
});

2.将es5.js里的var转换为let/const, 并保存到es6.js

lebab es5.js -o es6.js -t let

es5.js:

var a = '1', b = '2';

es6.js:

const a = '1', b = '2';

3.将es5.js里的var转换为let/const, 回调函数转换为 =>, 并保存到es6.js:

labeb es5.js -o es6.js -t 'arrow,let'

es5.js:

var a = '1', b = '2';
var c = function () {
    alert('3');
};
var d;
d = '4';
console.log(a, b, c(), d);

es6.js:

const a = '1', b = '2';
const c = () => {
    alert('3');
};
let d;
d = '4';
console.log(a, b, c(), d);

4.在代码中将ES5语法转换为ES6：

import lebab from 'lebab';
const {code, warnings} = lebab.transform('var f = function(){};', ['let', 'arrow']);
console.log(code); // -> "const f = () => {};"

5.将es5.js里的prototype语法转换成class：

lebab editor.js -o editor-es6.js --transform class

editor.js:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var promise_map_1 = require("./promise-map");
var Editor = /** @class */ (function () {
    function Editor(config) {
        this.config = config;
    }
    Object.defineProperty(Editor.prototype, "width", {
        get: function () {
            return this.config.width;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Editor.prototype, "height", {
        get: function () {
            return this.config.height;
        },
        enumerable: true,
        configurable: true
    });
    Editor.prototype.addElement = function (data) {
        var payload = JSON.parse(JSON.stringify(data));
        var asyncId = Math.random();
        return this.postMessage('editor.addElement', payload, asyncId);
    };
    Editor.prototype.setWatermark = function (url) {
        var asyncId = Math.random();
        return this.postMessage('editor.setWatermark', url, asyncId);
    };
    Editor.prototype.postMessage = function (action, payload, asyncId) {
        var _this = this;
        var send = function () {
            _this.config.frame.contentWindow.postMessage({
                action: action,
                asyncId: asyncId,
                payload: payload
            }, '*');
        };
        if (asyncId) {
            return new Promise(function (resolve) {
                send();
                promise_map_1.default[asyncId] = resolve;
            });
        }
        send();
    };
    return Editor;
}());
exports.default = Editor;

editor-es6.js:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var promise_map_1 = require("./promise-map");
var Editor = /** @class */ (function () {
    class Editor {
        constructor(config) {
            this.config = config;
        }
        get width() {
            return this.config.width;
        }
        get height() {
            return this.config.height;
        }
        addElement(data) {
            var payload = JSON.parse(JSON.stringify(data));
            var asyncId = Math.random();
            return this.postMessage('editor.addElement', payload, asyncId);
        }
        setWatermark(url) {
            var asyncId = Math.random();
            return this.postMessage('editor.setWatermark', url, asyncId);
        }
        postMessage(action, payload, asyncId) {
            var _this = this;
            var send = function () {
                _this.config.frame.contentWindow.postMessage({
                    action: action,
                    asyncId: asyncId,
                    payload: payload
                }, '*');
            };
            if (asyncId) {
                return new Promise(function (resolve) {
                    send();
                    promise_map_1.default[asyncId] = resolve;
                });
            }
            send();
        }
    }
    return Editor;
}());
exports.default = Editor;

6.将es5.js里可能会出现的语法转换成es6,es7语法：

 lebab index.js -o index-es6.js --transform 'arrow,arrow-return,for-of,for-each,arg-rest,arg-spread,obj-method,obj-shorthand,no-strict,exponent,multi-var,class,let,commonjs,template,default-param,destruct-param,includes'

插件

Lebab 为 Atom 和 Sublime 提供了插件，方便在编辑器中进行操作。
Atom: https://github.com/ga2mer/atom-lebab
Sublime: https://github.com/inkless/lebab-sublime