So easy! 将你的 ES5 代码转换为 ES6。

前言

作为一名前端开发者,用最新 JS 语法写代码是非常爽的事情,简单高效。而且现在的很多项目都推荐使用 ES6,比如 Angular、React、Vue。然而目前大多数浏览器对于 ES6 的语法支持并不统一,但这不是问题,使用 Babel 将 ES6 转换为 ES5,浏览器就能处理了。

有种场景在写代码的时候可能会遇到过:使用 node 构建的新项目中,有部分旧项目的代码要转移过来。新项目是 ES6 语法,旧项目是 ES5 语法。

针对这种场景,我们不可能一句一句,一个命令一个命令的敲过来,这是件很费事的事情。为了减少开发时间,下面我推荐一款工具 Lebab,可以将 ES5 转换为 ES6。

作用

Turn your ES5 code into readable ES6 (sugar-syntax). It does the opposite of what Babel does.

将你的 ES5 代码转换为可读的 ES6,它的做法与 Babel 相反。

演示

http://lebab.io/try-it

安装

npm install -g lebab

使用

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

lebab <file> -t <transform>

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

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

转换目录中的文件

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

在代码中使用

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

示例

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:

lebab 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 = () => {};"

插件

Lebab 为 Atom 和 Sublime 提供了插件,方便在编辑器中进行操作。

Atom: https://github.com/ga2mer/atom-lebab
Sublime: https://github.com/inkless/lebab-sublime

扩展阅读

https://github.com/babel/babel
https://github.com/lebab/lebab
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/New_in_JavaScript

带符号 * 的表示必填项
  1. 任务易
    任务易

    心疼程序员

    回复
  2. 公子
    公子

    - -! 不愧对码农这个分类

    回复
    1. MaiCong
      MaiCong博主

      最近加班加到吐啊

      回复
  3. 企业培训
    企业培训

    挺实用的

    回复
    1. MaiCong
      MaiCong博主

      O(∩_∩)O

      回复