ES6 JavaScript Minifier: babili

By  on  
Babel

The Babel toolchain is amazing.  We've used Babel to write ES6 JavaScript well before ES6 features hit browsers, we use it to parse JavaScript and write JSX, and much more.  Babel can do just about anything with the JavaScript language and I've just learned of another use for the Babel toolchain:  babili, the ES6+ aware JavaScript minifier.

At the time of its creation, many other JavaScript minifiers weren't capable of ES6 minifying but when you have an amazing, forward-thinking parser like Babel, creating an ES6+ aware minifier becomes much easier.

Using babili from Command Line

I prefer to use babili from command line when doing a quick minification:

// Sample source code:
class Mangler {
  constructor(program) {
    this.program = program;
  }
}
new Mangler(); // without this it would just output nothing since Mangler isn't used

// Before:
// ES2015+ code -> Babel -> Babili/Uglify -> Minified ES5 Code
var a=function a(b){_classCallCheck(this,a),this.program=b};new a;

// After:
// ES2015+ code -> Babili -> Minified ES2015+ Code
class a{constructor(b){this.program=b}}new a;

Note that babili does not transpile ES5 JavaScript before minifying -- you'll need to use an excellent tool like lebab to get ES6+ from ES5.  Assuming you do have ES6 in your source file, you'll notice all of your code has been elegantly minified by babili!

Using babili via Node.js

Being a JavaScript parser implemented in JavaScript, babili is also available for use via Node.js APIs.  There are also dozens of babili plugins you can use to customize your minification.  Check out the documentation for impressive benchmarks and Node.js usage information.

Babel has had as much of an impact on writing JavaScript for the web as any popular JavaScript frameworks and will continue to do so in the future.  If you haven't explored the Babel toolchain and it's plethora of plugins, take the time to give them a look.  Being able to write and experiment with edge JavaScript language features before they hit the browsers is an advantage to any developer, whether it be in getting them a job or simply keeping them up to speed with the language.

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

  • By
    Telephone Link Protocol

    We've always been able to create links with protocols other than the usual HTTP, like mailto, skype, irc ,and more;  they're an excellent convenience to visitors.  With mobile phone browsers having become infinitely more usable, we can now extend that convenience to phone numbers: The tel...

Discussion

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