Lebab的ES5至ES6

发布于:2021-02-20 00:01:16

0

260

0

Lebab ES5 ES6 JavaScript

我们都喜欢ES6带来的好处,你可以在《六个小巧但很棒的ES6功能》和《六个更小但更棒的ES6功能》中看到很多,比如原生类支持、箭头函数和其他语言改进。既然浏览器支持这些语法的增加,我们中的许多人都急于编写ES6代码,而对更新旧代码的想法感到畏缩。维护……这不是很痛苦吗?Lebab:一个将传统JavaScript语法编写的JavaScript转换为明亮的ES6语法的项目!

Lebab的任务与Babel相反,它是一个易于使用的命令行实用程序。安装该命令,然后像使用其他模块一样使用该命令:

$ npm install -g lebab

安装了Lebab之后,您就可以开始将旧的JavaScript转换为ES6 beauty。您可以转换单个文件或整个文件模式:

# single file
$ lebab main.js -o main-es6.js --transform arrow

# pattern: .js files in `src/js`$ lebab --replace src/js/ --transform arrow

# pattern: used for any type of matching
$ lebab --replace 'src/js/**/*.jsx' --transform arrow

您必须指定一种转换以应用于旧版JavaScript文件:

# Use arrow functions instead of `function` keyword when possible
$ lebab main.js -o main-es6.js --transform arrow

# Use `let` and `const` instead of `var` when possible
$ lebab main-es6.js -o main-es6.js --transform let

# Use template strings instead of string concatenation
$ lebab main-es6.js -o main-es6.js --transform template

这是Lebab转换JavaScript前后的快速介绍:

/*
   BEFORE:
*/

// Let/const
var name = 'Bob', time = 'yesterday';
time = 'today';

// Template string
console.log('Hello ' + name + ', how are you ' + time + '?');

var bob = {
 // Object shorthand
 name: name,
 // Object method
 sayMyName: function () {
   console.log(this.name);
 }
};


/*
   AFTER:
*/
// Let/const
const name = 'Bob';

let time = 'yesterday';
time = 'today';

// Template string
console.log(`Hello ${name}, how are you ${time}?`);

const bob = {
 // Object shorthand
 name,
 // Object method
 sayMyName() {
   console.log(this.name);
 }
};

令人沮丧的是,您一次只能通过命令行执行一次转换,因此,如果您想使事情变得更快,可以使用编程API:

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

有关转换的列表,其可靠性甚至可以做出贡献,请查看Lebab GitHub页面。

Lebab是一个了不起的项目,可以为我们节省很多人工维护。您是否应该盲目地相信Lebab带来的一切?可能不会。甚至最简单的Lebab转型也会使我们的生活更轻松吗?