ES5 to ES6 with Lebab

By  on  
Lebab

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!

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:

$ 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:

# 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:

# 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:

/*
    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:

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 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!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    Scrolling &#8220;Agree to Terms&#8221; Component with MooTools ScrollSpy

    Remember the good old days of Windows applications forcing you to scroll down to the bottom of the "terms and conditions" pane, theoretically in an effort ensure that you actually read them? You're saying "No David, don't do it." Too late -- I've done...

  • By
    MooTools PulseFade Plugin

    I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery. The MooTools JavaScript Options of the class include: min: (defaults to .5) the...

Discussion

  1. Doug McQueen

    Sigh another tool to add to the long list of useless js tools out there..

    • A tool that makes updating legacy code easier is “useless”? You can’t be serious…

    • Gil Nimer

      are you serious? This is perfect for companies, startups or anybody who wants to upgrade to es6 yet still want to preserve their time and ten thousands of lines they invested in.

  2. Solaris

    Why the hell do people keep on reinventing the wheel and adding on gadgets to it to make it more and more complex. The objective of modern era coding should be to simplify things, not to confuse the hell out of developers and their team members. Why do we even need ES6?

  3. Peter

    It is actually possible to specify more than one transform. You just have to comma separate (no spacing) the transform keywords.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!