ES5转化ES6超简便方法

发布于 / 代码 / 2 条评论

前言

作为一名前端开发者,用最新 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_JavaScrip
转载原创文章请注明,转载自: 造梦先生 » ES5转化ES6超简便方法
  1. avatar

    😳 好用 没的说

  2. avatar

    ❓ 可以 很强势