babili

_posts/2016-08-26-babili.md

@@ -0,0 +1,100 @@
+---
+layout: post
+title:  "Releasing Babili (beta)"
+author: Henry Zhu
+date:   2016-08-26 09:30:00
+categories: announcements
+share_text: "Releasing Babili (beta)"
+---
+
+Babili (babel-minify)
+
+We released [babili](https://github.com/babel/babili) yesterday! (under an MIT license)
+
+There seem to be a lot of (valid) questions about why a new minifier is necessary so we want to write a post about some reasons and the future.
+
+## Why minify?
+
+## Issues with current minifiers
+
+Tools such as [uglify](https://github.com/mishoo/UglifyJS2) don't currently support targeting the latest version of Javascript ([yet](https://github.com/mishoo/UglifyJS2/issues/448)).
+
+We currently to use tools like Babel to compile ES6 code down to ES5 code to support older browsers. Then we use something like uglify to minify our code to cut down on the bundle size.
+
+However as browsers implement more ES6 features and we drop support for older browser versions, there will be a point where you wouldn't have to compile ES6 code to ES5 because all the support targets already understand ES6. However b ecause uglify cannot parse ES6, you would still have to compile down to ES5 anyway.
+
+## Babili
+
+That's where Babili comes in.
+
+Babili is ES6+ aware because it is built using the Babel toolchain. More specifically, it is a set of babel plugins + a preset just like with the `es2015` preset.
+
+Like described in [Not Born to Die](http://babeljs.io/blog/2015/02/15/not-born-to-die) when Babel was renamed from 6to5, Babel was originally a specific transpiler for ES6 to ES5. A transpiler is just a compiler. The same techniques work to compile ES6 as it is to minify javascript.
+
+## Example
+
+When it's possible to only target browsers that support newer ES features, code sizes can be smaller because you don't have to transpile and then minify.
+
+For example: say we want to minify a file that contains a ES6 class and we want to target the latest version of the chrome.
+
+```js
+class Mangler {
+  constructor(program) {
+    this.program = program;
+  }
+}
+// need this since otherwise Mangler isn't used
+new Mangler(); 
+```
+
+Before, we might run Babel to transpile [the class into a function](http://babeljs.io/docs/plugins/transform-es2015-classes) and run uglify on the compiled code to send to the browser.
+
+```js
+// ES6 code -> Babel -> Uglify -> Minified ES5 Code
+var Mangler=function a(b){_classCallCheck(this,a),this.program=b};Mangler();
+```
+
+With the babel minifier, you can just run the minifier which will work on ES6 code.
+
+```js
+// ES6 code -> Babili -> Minified ES6 Code
+class a{constructor(b){this.program=b}}new a;
+```
+
+Also it's important to note that this isn't specific to ES6. Because Babel updates as ECMAScript updates (with [ES2015, ES2016, and now ES2017](http://babeljs.io/docs/plugins/#official-presets)) and follows the proposal process for experimental features (with our [stage-x presets](http://babeljs.io/docs/plugins/#stage-x-experimental-presets)), the minifier should be able to output whatever version of ECMAScript that is supported.
+
+## Usage
+
+If you already use Babel, you can just add the [babili](https://github.com/babel/babili#babel-preset) preset (babel-preset-babili) to your config.
+
+You probably want to enable this only in production, so use the [env option](http://babeljs.io/docs/usage/babelrc/#env-option) which uses either `process.env.BABEL_ENV` or `process.env.NODE_ENV`
+
+```bash
+$ npm install babel-preset-babili --save-dev
+```
+
+```js
+// previous .babelrc
+{ "presets": ["es2015"] }
+// .babelrc
+{
+  "presets": ["es2015"],
+  "env": {
+    "production": {
+      "presets": ["babili"]
+    }
+  }
+}
+```
+
+If you don't use Babel, you can use our standalone cli tool [`babili`](https://github.com/babel/babili#cli). (Currently it's just a wrapper for babel-cli + the preset)
+
+```bash
+$ npm install babili --save-dev
+```
+
+```bash
+# equivalent to 
+# babel src -d lib --presets=babili
+$ babili src -d lib
+```