Why walk if you can take a bus? Why rewrite old ES5 code manually if you can use some program to do that for you? But first, let me introduce ECMAScript 6 to you – the best thing that has ever happened to JavaScript. However, as same as all innovations, that standard also has many problems.
One of them is browser support. It’s steadily improving, but it’s not like everyone is keeping software up to date on their computers. Transpilers, like Babel and Traceur, come to the rescue. Thanks to them we can use most of the new functions. On that website, we can check which ones are supported.
The second problem is the opposite of the first one. Existing scripts contain millions of lines of code written in
ES5. If, as the authors, you want to start using the newest version of that standard, rewriting everything is
pretty time-consuming. Is it possible to correct that? Can we, in a fast and pleasure way, from that code
get such a code?
The answer is yes. And I will show you how to do that.
What we need is Lebab. It works inversely as Babel, and it’s transpiling code fragments written in ES5 to their counterparts in ES6. Lebab is still in a development phase, but just now its capabilities are great. You can find the actual list of its functions on GitHub.
Lebab is available as a package in npm repository, so its installation requires one, simple command:
npm install -g lebab
Then we can start to work. Example Lebab call looks like that:
lebab input-es5.js -o output-es6.js --transform transform-name
We put required conversion type instead of transform-name. There are many
types, e.g. commonjs, which
transforms CommonJS modules into ES6 version, including require and module.exports calls.
Unfortunately, that approach has one disadvantage – we can’t use many conversions at the same time. To transform whole code, we need to call Lebab few or even dozen times.
We can also add Lebab to a script and run it in Node.JS. It allows giving transformation table to executing, and it requires just two lines of code.
Code variable contains generated code, and warnings variable contains a table with possible errors.
Is Lebab actually good at transpiling code? I will try to answer that question by presenting few examples.
Let’s start with a simple code, which sums up even elements of Fibonacci code, smaller than 300. Here is a code written in old JavaScript:
Now we run Lebab:
lebab e1.es5.js -o e1.arrow.js --transform arrow
And let’s check the result code:
As we can see, a function was transpiled into arrow function. Unfortunately, it’s the only thing that has been changed. Let’s add a variable transformation to that. It’s marked as Unsafe, which means that it may not work properly, but in example file, it should work.
lebab e1.arrow.js -o e1.es6.js --transform let
The result code looks like that:
It looks like that the code has been transpiled in a pretty good way. But a limitation of one transformation per call makes the whole work laborious.
Let’s try the second approach, which I have mentioned before. A source file will be more complicated this time. A code consists of two classes, and one of them inherits after the second one through prototyping:
Now we’re preparing a script, which will be responsible for reading our source code, converting it and saving it to a new file.
After running the script in Node.js, we receive an object code:
Lebab also dealt with that case. If you want more examples of different transformations, take a look at GitHub.
Although Lebab is still in development phase, we can use it to boost migration to the newer code. Of course, it’s not an ideal tool. The creators of ES6 recommend using only one transformation at a given moment and checking if everything went as planned.
In the future, aside from adjustments of a conversion for the sixth edition of ECMAScript, it will also be a support for ES7. Will it be enough for Lebab to become popular? Time will show.
