Lebab的ES5至ES6

We all love the goodies that come with ES6, many of them which you can see in Six Tiny But Awesome ES6 Features and Six More Tiny But Awesome ES6 Features, like native class support, arrow functions, and other language improvements.  Now that browsers support most of these syntax additions, many of us are rushing to write ES6 code while cringing at the thought of updating older code.  Maintenance....ain't it a pain?!  Enter Lebab:  a project which transpiles JavaScript written in traditional JavaScript syntax to bright, shiny ES6 syntax!

我们都喜欢ES6附带的优点，您可以在“ 六小但很棒的ES6功能”和“ 六小而出色的ES6功能”中看到许多优点，例如本机类支持，箭头功能和其他语言改进。 现在，浏览器支持这些语法中的大多数，我们中的许多人都急于编写ES6代码，同时渴望更新旧代码。 维护...。不是很痛苦吗？！ Enter Lebab ：一个将传统JavaScript语法编写JavaScript转换为明亮，闪亮的ES6语法的项目！

Lebab, whose task is the opposite of Babel, is an easy to use command line utility.  Install and then use the command like any other module:

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

$ npm install -g lebab

With Lebab installed you can start to transform your old JavaScript into ES6 beauty.  You can transform a single file or an entire pattern of files:

安装了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

You must specify one transformation to apply to your legacy JavaScript file:

您必须指定一种转换以应用于旧版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

Here's a quick before and after of JavaScript transformed by Lebab:

这是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); } };

It's frustrating that you can only perform one transformation at a time via the command line, so if you're looking to make things faster, you could use the programmatic API:

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

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

For a list of transformations, their reliability, or even to contribute, check out the Lebab GitHub page.

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

Lebab is an amazing project that could save us all a lot of manual maintenance.  Should you blindly trust everything that comes out of Lebab?  Probably not.  Will even the simplest of Lebab's transformations make our lives easier?  Yes!

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

翻译自: https://davidwalsh.name/lebab

相关资源：browser.min.js 用于es6转es5语法