From 8449de74a9149ebf91b277f6d20bc33a0cb41f8f Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Fri, 26 Aug 2016 12:39:28 -0600 Subject: [PATCH 01/28] babili --- _posts/2016-08-26-babili.md | 100 ++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 _posts/2016-08-26-babili.md diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md new file mode 100644 index 0000000000..95be15bc06 --- /dev/null +++ b/_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 +``` From 2aa9315121f51a989a6ae7159c7c176539e2e900 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Fri, 26 Aug 2016 15:20:22 -0600 Subject: [PATCH 02/28] fixes --- _posts/2016-08-26-babili.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 95be15bc06..3f72ce38a4 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -19,7 +19,7 @@ There seem to be a lot of (valid) questions about why a new minifier is necessar 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. +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 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. From 326448947c2d3a0aaa0bdfc2a06371df7c9026a5 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Fri, 26 Aug 2016 15:23:59 -0600 Subject: [PATCH 03/28] fixes --- _posts/2016-08-26-babili.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 3f72ce38a4..3596d95c08 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -21,7 +21,7 @@ Tools such as [uglify](https://github.com/mishoo/UglifyJS2) don't currently supp 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 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. +As browsers implement more ES6 features and we drop support for older browser versions, there is a sliding window of the version of javascript you write in and the target javascript version you compile/minify to. However because uglify cannot parse ES6, you would still have to compile down to ES5 anyway. ## Babili @@ -29,7 +29,7 @@ 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. +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 so the same concepts to transform arrow functions can work to minify code. ## Example From f948dd3e27e5c9a267d5861ab74059e7c500260b Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Sat, 27 Aug 2016 10:45:51 -0600 Subject: [PATCH 04/28] Update 2016-08-26-babili.md --- _posts/2016-08-26-babili.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 3596d95c08..3dcf5307f7 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -15,7 +15,11 @@ There seem to be a lot of (valid) questions about why a new minifier is necessar ## Why minify? -## Issues with current minifiers +[Minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unncessary characeters without changing it's functionality. The basics of minification remove things like comments, whitespace, newlines, and extra parentheses. You can also simplify code, transform code to smaller equivalents, remove unused code, etc. + +Minification is useful because it reduces the amount of code transferred from the server to the client. Because users download leses, the page can load faster. + +## 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)). From 7d4a123d4c0b02bcd34d31819c0e632f55eca2fb Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Sun, 28 Aug 2016 00:08:10 -0400 Subject: [PATCH 05/28] Update 2016-08-26-babili.md --- _posts/2016-08-26-babili.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 3dcf5307f7..39b8a4390e 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -102,3 +102,23 @@ $ npm install babili --save-dev # babel src -d lib --presets=babili $ babili src -d lib ``` + +## Pros/Cons + +Uglify Pros +- no change to existing tooling if already minifying +- battle-tested/production ready (been around for years with many users so there's less bugs/issues). + +Babili Pros: +- ES6+ aware because we can use the babylon parser and Babel will update as standards/browsers update. +- Uses the existing babel toolchain, can consume as a babel preset or standalone. +- Potential to work on integrating better with existing bundlers like webpack. +- Each minfication step can be split into into it's own plugins and plenty of options for customization. Makes it easier to both contribute and to find/submit issues for specific problems. Also people can be free to experiment with their own plugins and get them accepted into core. + - For example: [this](https://github.com/babel/babili/tree/master/packages/babel-plugin-transform-minify-booleans) just turns `true` into `!0` which is straightforward to write. +- Should be an easy transition if people are familiar with transpiling with Babel already. + +Babili Cons: +- Just released (early), so not many users yet. Early adopters will have to deal with tool that isn't as battle-tested as Uglify at first. +- At the moment, might not be faster or produce smaller gziped sizes than Uglify or other tools. + +TL;DR: Babili should be able to keep up with the ECMAScript standard as new features get added as well as target the environments you need to support. It may not be as production-ready as uglify at the moment since it was just released but as we continue to optimize with more users it should be more than capable. From ea8f816a02ba9ae9dd1bd5787127523878cf5d54 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Sun, 28 Aug 2016 00:19:42 -0400 Subject: [PATCH 06/28] Update 2016-08-26-babili.md --- _posts/2016-08-26-babili.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 39b8a4390e..1881174f8f 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -106,11 +106,16 @@ $ babili src -d lib ## Pros/Cons Uglify Pros -- no change to existing tooling if already minifying +- no change to existing tooling if you are already minifying - battle-tested/production ready (been around for years with many users so there's less bugs/issues). +- fast, outputs small code already + +Uglify Cons +- Custom parser/tooling, so difficult to output/minify ES6 and more. +- Not modular, no way to create own plugins/minification strategies Babili Pros: -- ES6+ aware because we can use the babylon parser and Babel will update as standards/browsers update. +- ES6+ aware (nothing special needs to be done because we can use the babylon parser) and Babel will update as standards/browsers update. - Uses the existing babel toolchain, can consume as a babel preset or standalone. - Potential to work on integrating better with existing bundlers like webpack. - Each minfication step can be split into into it's own plugins and plenty of options for customization. Makes it easier to both contribute and to find/submit issues for specific problems. Also people can be free to experiment with their own plugins and get them accepted into core. @@ -121,4 +126,4 @@ Babili Cons: - Just released (early), so not many users yet. Early adopters will have to deal with tool that isn't as battle-tested as Uglify at first. - At the moment, might not be faster or produce smaller gziped sizes than Uglify or other tools. -TL;DR: Babili should be able to keep up with the ECMAScript standard as new features get added as well as target the environments you need to support. It may not be as production-ready as uglify at the moment since it was just released but as we continue to optimize with more users it should be more than capable. +TL;DR: Babili should be able to keep up with the ECMAScript standard as new features get added as well as target the environments you need to support. It has a lot of potential: it may not be as production-ready as uglify at the moment since it was just released but as we continue to optimize with more users it should be more than capable. From bce0a140ec7157a08151f85eb9aae045ec7fd87b Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Sun, 28 Aug 2016 16:27:22 -0400 Subject: [PATCH 07/28] fixes --- _posts/2016-08-26-babili.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 1881174f8f..66c9465d89 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -15,9 +15,9 @@ There seem to be a lot of (valid) questions about why a new minifier is necessar ## Why minify? -[Minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unncessary characeters without changing it's functionality. The basics of minification remove things like comments, whitespace, newlines, and extra parentheses. You can also simplify code, transform code to smaller equivalents, remove unused code, etc. +[Minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unncessary characeters without changing its functionality. The basics of minification remove things like comments, whitespace, newlines, and extra parentheses. You can also simplify code, transform code to smaller equivalents, remove unused code, etc. -Minification is useful because it reduces the amount of code transferred from the server to the client. Because users download leses, the page can load faster. +Minification is useful because it reduces the amount of code transferred from the server to the client. Because users download less, the page can load faster. ## Current minifiers @@ -106,24 +106,25 @@ $ babili src -d lib ## Pros/Cons Uglify Pros -- no change to existing tooling if you are already minifying -- battle-tested/production ready (been around for years with many users so there's less bugs/issues). -- fast, outputs small code already +- No change to existing tooling if you are already minifying. +- Battle-tested/production ready (been around for years, and has wide adoption so there's less bugs/issues). +- It's fast and outputs small code already. Uglify Cons - Custom parser/tooling, so difficult to output/minify ES6 and more. -- Not modular, no way to create own plugins/minification strategies +- Not modular, no way to create own plugins/minification strategies. Babili Pros: - ES6+ aware (nothing special needs to be done because we can use the babylon parser) and Babel will update as standards/browsers update. - Uses the existing babel toolchain, can consume as a babel preset or standalone. - Potential to work on integrating better with existing bundlers like webpack. -- Each minfication step can be split into into it's own plugins and plenty of options for customization. Makes it easier to both contribute and to find/submit issues for specific problems. Also people can be free to experiment with their own plugins and get them accepted into core. +- Potential for custom smart transforms for React/Flow, etc. +- Each minfication step can be split into it's own plugins and plenty of options for customization. Makes it easier to both contribute and to find/submit issues for specific problems. Also people can be free to experiment with their own plugins and get them accepted into core. - For example: [this](https://github.com/babel/babili/tree/master/packages/babel-plugin-transform-minify-booleans) just turns `true` into `!0` which is straightforward to write. - Should be an easy transition if people are familiar with transpiling with Babel already. Babili Cons: -- Just released (early), so not many users yet. Early adopters will have to deal with tool that isn't as battle-tested as Uglify at first. -- At the moment, might not be faster or produce smaller gziped sizes than Uglify or other tools. +- We released it early, so there aren't many users yet. Early adopters will have to deal with a tool that isn't as battle-tested as Uglify at first. +- Right now, the performance is worse/size is worse than Uglify on our benchmark tests. However, this is something we'll be focusing on improving. TL;DR: Babili should be able to keep up with the ECMAScript standard as new features get added as well as target the environments you need to support. It has a lot of potential: it may not be as production-ready as uglify at the moment since it was just released but as we continue to optimize with more users it should be more than capable. From b196d54a46eec877ffd020ae03105b1fc9688bfe Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Sun, 28 Aug 2016 16:28:46 -0400 Subject: [PATCH 08/28] additions --- _posts/2016-08-26-babili.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 66c9465d89..d3929e3c2b 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -117,8 +117,9 @@ Uglify Cons Babili Pros: - ES6+ aware (nothing special needs to be done because we can use the babylon parser) and Babel will update as standards/browsers update. - Uses the existing babel toolchain, can consume as a babel preset or standalone. -- Potential to work on integrating better with existing bundlers like webpack. - Potential for custom smart transforms for React/Flow, etc. +- Could use flow/typescript annotations to help with minification. +- May integrate better with existing bundlers like webpack. - Each minfication step can be split into it's own plugins and plenty of options for customization. Makes it easier to both contribute and to find/submit issues for specific problems. Also people can be free to experiment with their own plugins and get them accepted into core. - For example: [this](https://github.com/babel/babili/tree/master/packages/babel-plugin-transform-minify-booleans) just turns `true` into `!0` which is straightforward to write. - Should be an easy transition if people are familiar with transpiling with Babel already. From 14b7ca724e2979e56a6e32c3917575944ecf76a8 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Sun, 28 Aug 2016 22:31:12 -0400 Subject: [PATCH 09/28] updates --- _posts/2016-08-26-babili.md | 64 +++++++++++++++++++++++++++++++++---- 1 file changed, 58 insertions(+), 6 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index d3929e3c2b..5cf66de7f0 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -7,11 +7,23 @@ categories: announcements share_text: "Releasing Babili (beta)" --- -Babili (babel-minify) +# Babili (babel-minify) -We released [babili](https://github.com/babel/babili) yesterday! (under an MIT license) +We released [babili](https://github.com/babel/babili) as beta (0.0.1) 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. +There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that. We also have a [#minify](https://babeljs.slack.com/messages/minify/) slack room! + +TL;DR: Babili can output to ES2015+ code so you don't need to transpile and then minify if it's not necessary. Babili is also modular/flexible (it's a babel preset and thus supports user plugins) and can be used as a preset or cli tool. Babili should also be able to do ES2015+ specific optimizations. + +## Prounciation + +```bash +# sounds like "bah billy" +say babili +``` + + +> If you can't remember the name, babel-minify works too. ## Why minify? @@ -54,7 +66,7 @@ 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 +// ES6 code -> Babel -> Uglify/Babili -> Minified ES5 Code var Mangler=function a(b){_classCallCheck(this,a),this.program=b};Mangler(); ``` @@ -67,8 +79,12 @@ 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. +In addition, there are also specific optimizations we can make when we minify ES2015+ code. + ## Usage +### Babel Preset + 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` @@ -91,7 +107,9 @@ $ npm install babel-preset-babili --save-dev } ``` -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) +### Babili CLI + +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). You could run this after transpiling (or not) in place of uglify. ```bash $ npm install babili --save-dev @@ -103,6 +121,28 @@ $ npm install babili --save-dev $ babili src -d lib ``` +### Webpack + +You can either just use the preset option above with `babel-loader`, or use it seperately with the [babili-webpack-plugin](https://github.com/boopathi/babili-webpack-plugin) (made by [@boopathi](https://github.com/boopathi/), who also works on babili). + +```bash +$ npm install babili-webpack-plugin --save-dev +``` + +```js +// webpack.config.js +const BabiliPlugin = require("babili-webpack-plugin"); +module.exports = { + entry: //..., + output: //..., + plugins: [ + new BabiliPlugin(options) + ] +} +``` + +We want to have a better story with integration with webpack/bundlers in the near future! Ref [#100](https://github.com/babel/babili/issues/100). + ## Pros/Cons Uglify Pros @@ -119,7 +159,6 @@ Babili Pros: - Uses the existing babel toolchain, can consume as a babel preset or standalone. - Potential for custom smart transforms for React/Flow, etc. - Could use flow/typescript annotations to help with minification. -- May integrate better with existing bundlers like webpack. - Each minfication step can be split into it's own plugins and plenty of options for customization. Makes it easier to both contribute and to find/submit issues for specific problems. Also people can be free to experiment with their own plugins and get them accepted into core. - For example: [this](https://github.com/babel/babili/tree/master/packages/babel-plugin-transform-minify-booleans) just turns `true` into `!0` which is straightforward to write. - Should be an easy transition if people are familiar with transpiling with Babel already. @@ -129,3 +168,16 @@ Babili Cons: - Right now, the performance is worse/size is worse than Uglify on our benchmark tests. However, this is something we'll be focusing on improving. TL;DR: Babili should be able to keep up with the ECMAScript standard as new features get added as well as target the environments you need to support. It has a lot of potential: it may not be as production-ready as uglify at the moment since it was just released but as we continue to optimize with more users it should be more than capable. + +## How to Help + +[Amjad](https://twitter.com/amasad) had been working on this project for a while but we decided to release it earlier as a beta to allow the community to test it out and both contribute through reporting bugs and patches. + +It's still early days for this project so there's a lot to help out with. + +- Documentation: Explanations of each plugin +- Testing on more codebases: This will help everyone greatly. Because a minifier runs on all code it has potential for a lot of edge cases/bugs not covered in our basic unit tests. Hopefully we can setup a way to report issues easily; now that the [repl](babeljs.io/repl/) supports the minifier it should be easier to reproduce/link bugs. In the future we will want to be able to specify specific plugins so we can pinpoint minimal reproduction steps. +- Project infrastructure/maintenance: We want to create more robust benchmarking, setup intergration tests on popular open source projects (run the minifier, and then run all the project's unit tests). +- Check the output: If something can be more simplified, it should be straightfoward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. + +Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and for Facebook allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James @thejameskyle](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own[babel-minify](https://github.com/boopathi/babel-minify) project! From 5b1bf68f312ae9954c4dc2a6711228d4597b59b6 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Sun, 28 Aug 2016 23:12:07 -0400 Subject: [PATCH 10/28] lol --- _posts/2016-08-26-babili.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 5cf66de7f0..a43916e70a 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -51,7 +51,7 @@ Like described in [Not Born to Die](http://babeljs.io/blog/2015/02/15/not-born-t 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. +For example: say we want to minify a file that contains an ES6 class and we want to target the latest version of Chrome. ```js class Mangler { From f94cb994edfd4666aa8892dbd689e8a4fc8b2d93 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Sun, 28 Aug 2016 23:14:00 -0400 Subject: [PATCH 11/28] es6 -> es2015 --- _posts/2016-08-26-babili.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index a43916e70a..954c93617f 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -35,23 +35,23 @@ Minification is useful because it reduces the amount of code transferred from th 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 cut down on the bundle size. +We currently to use tools like Babel to compile ES2015 code down to ES5 code to support older browsers. Then we use something like uglify to cut down on the bundle size. -As browsers implement more ES6 features and we drop support for older browser versions, there is a sliding window of the version of javascript you write in and the target javascript version you compile/minify to. However because uglify cannot parse ES6, you would still have to compile down to ES5 anyway. +As browsers implement more ES2015 features and we drop support for older browser versions, there is a sliding window of the version of javascript you write in and the target javascript version you compile/minify to. However because uglify cannot parse ES2015, 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. +Babili is ES2015+ 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 so the same concepts to transform arrow functions can work to minify code. +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 ES2016 to ES5. A transpiler is just a compiler so the same concepts to transform arrow functions can work to minify code. ## 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 an ES6 class and we want to target the latest version of Chrome. +For example: say we want to minify a file that contains an ES2015 class and we want to target the latest version of Chrome. ```js class Mangler { @@ -66,18 +66,18 @@ 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/Babili -> Minified ES5 Code +// ES2015 code -> Babel -> Uglify/Babili -> 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. +With the babel minifier, you can just run the minifier which will work on ES2015 code. ```js -// ES6 code -> Babili -> Minified ES6 Code +// ES2015 code -> Babili -> Minified ES2015 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. +Also it's important to note that this isn't specific to ES2015. 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. In addition, there are also specific optimizations we can make when we minify ES2015+ code. @@ -151,11 +151,11 @@ Uglify Pros - It's fast and outputs small code already. Uglify Cons -- Custom parser/tooling, so difficult to output/minify ES6 and more. +- Custom parser/tooling, so difficult to output/minify ES2015+ and more. - Not modular, no way to create own plugins/minification strategies. Babili Pros: -- ES6+ aware (nothing special needs to be done because we can use the babylon parser) and Babel will update as standards/browsers update. +- ES2015+ aware (nothing special needs to be done because we can use the babylon parser) and Babel will update as standards/browsers update. - Uses the existing babel toolchain, can consume as a babel preset or standalone. - Potential for custom smart transforms for React/Flow, etc. - Could use flow/typescript annotations to help with minification. From 12d67327dd21d961579d46e9b240847d1b557897 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Sun, 28 Aug 2016 23:18:06 -0400 Subject: [PATCH 12/28] typo --- _posts/2016-08-26-babili.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 954c93617f..0e5c730bc0 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -180,4 +180,4 @@ It's still early days for this project so there's a lot to help out with. - Project infrastructure/maintenance: We want to create more robust benchmarking, setup intergration tests on popular open source projects (run the minifier, and then run all the project's unit tests). - Check the output: If something can be more simplified, it should be straightfoward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. -Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and for Facebook allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James @thejameskyle](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own[babel-minify](https://github.com/boopathi/babel-minify) project! +Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and for Facebook allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James @thejameskyle](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project! From 618e895a8d0b2ba5710e20f909261f11f120a189 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 15:30:32 -0400 Subject: [PATCH 13/28] lots of fixes :smile: --- _posts/2016-08-26-babili.md | 39 +++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 0e5c730bc0..a534f2d01a 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -13,45 +13,42 @@ We released [babili](https://github.com/babel/babili) as beta (0.0.1) yesterday There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that. We also have a [#minify](https://babeljs.slack.com/messages/minify/) slack room! -TL;DR: Babili can output to ES2015+ code so you don't need to transpile and then minify if it's not necessary. Babili is also modular/flexible (it's a babel preset and thus supports user plugins) and can be used as a preset or cli tool. Babili should also be able to do ES2015+ specific optimizations. +TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unwanted as people begin to ship ES6 to clients. Babili is also modular/flexible (it's a Babel preset and thus supports user plugins) and can be used as a preset or cli tool. Babili should also be able to do ES2015+ specific optimizations. -## Prounciation +## Pronunciation ```bash # sounds like "bah billy" say babili ``` - > If you can't remember the name, babel-minify works too. ## Why minify? -[Minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unncessary characeters without changing its functionality. The basics of minification remove things like comments, whitespace, newlines, and extra parentheses. You can also simplify code, transform code to smaller equivalents, remove unused code, etc. +At a basic level, [minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unnecessary characters from a program without changing its functionality -- things like comments, whitespace, newlines, and extra parentheses. Advanced minification works by transforming programs into smaller equivalents and by removing redundant or even unreachable code. Minification is useful because it reduces the amount of code transferred from the server to the client. Because users download less, the page can load faster. ## 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)). +Tools such as [Uglify](https://github.com/mishoo/UglifyJS2) don't currently support targeting the latest version of ECMAScript ([yet](https://github.com/mishoo/UglifyJS2/issues/448)). -We currently to use tools like Babel to compile ES2015 code down to ES5 code to support older browsers. Then we use something like uglify to cut down on the bundle size. +We currently use tools like Babel to compile ES2015 code down to ES5 code to support older browsers. Then we use something like Uglify to cut down on the bundle size. -As browsers implement more ES2015 features and we drop support for older browser versions, there is a sliding window of the version of javascript you write in and the target javascript version you compile/minify to. However because uglify cannot parse ES2015, you would still have to compile down to ES5 anyway. +As browsers implement more ES2015 features and we drop support for older browser versions, there is a sliding window of the version of ECMAScript you write in and the target ECMAScript version you compile/minify to. However because Uglify cannot parse ES2015, you would still have to compile down to ES5 anyway. ## Babili That's where Babili comes in. -Babili is ES2015+ 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. +Babili is ES2015+ 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 ES2016 to ES5. A transpiler is just a compiler so the same concepts to transform arrow functions can work to minify code. +As 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 ES2016 to ES5. A transpiler is just a compiler so the same concepts to transform arrow functions can work to minify code. ## 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 an ES2015 class and we want to target the latest version of Chrome. +Say we're targeting the latest versions of Chrome, Firefox and Safari -- all of which support ES2015 classes. Then, compiling ES2015 classes to a constructor function and prototype methods (ES5) results in more code (and potentially lose any optimizations browsers might have for classes). ```js class Mangler { @@ -63,14 +60,14 @@ class Mangler { 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. +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 // ES2015 code -> Babel -> Uglify/Babili -> 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 ES2015 code. +With Babili, you can just run the minifier which works on ES2015 code. ```js // ES2015 code -> Babili -> Minified ES2015 Code @@ -79,7 +76,7 @@ class a{constructor(b){this.program=b}}new a; Also it's important to note that this isn't specific to ES2015. 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. -In addition, there are also specific optimizations we can make when we minify ES2015+ code. +In the future, we might make use of the ES2015+ syntax information we have at compile time (e.g. we know that given function is an arrow function or that a given binding is block-scoped etc) to do advanced optimizations. And we can make use of the knowledge that we're targeting an ES2015+ environment in creative ways. We're just getting started so let us know if you have any ideas! ## Usage @@ -109,7 +106,7 @@ $ npm install babel-preset-babili --save-dev ### Babili CLI -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). You could run this after transpiling (or not) in place of uglify. +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). You could run this after transpiling (or not) in place of Uglify. ```bash $ npm install babili --save-dev @@ -117,7 +114,7 @@ $ npm install babili --save-dev ```bash # equivalent to -# babel src -d lib --presets=babili +# babel src -d lib --presets=babili --no-babelrc $ babili src -d lib ``` @@ -156,10 +153,10 @@ Uglify Cons Babili Pros: - ES2015+ aware (nothing special needs to be done because we can use the babylon parser) and Babel will update as standards/browsers update. -- Uses the existing babel toolchain, can consume as a babel preset or standalone. +- Uses the existing Babel toolchain, can consume as a Babel preset or standalone. - Potential for custom smart transforms for React/Flow, etc. - Could use flow/typescript annotations to help with minification. -- Each minfication step can be split into it's own plugins and plenty of options for customization. Makes it easier to both contribute and to find/submit issues for specific problems. Also people can be free to experiment with their own plugins and get them accepted into core. +- Each minification step can be split into its own plugin, and there’s plenty of options for customization. This makes it easier to contribute and to find/submit issues for specific problems. It also means that people can independently create their own experimental plugins before upstreaming them into core. - For example: [this](https://github.com/babel/babili/tree/master/packages/babel-plugin-transform-minify-booleans) just turns `true` into `!0` which is straightforward to write. - Should be an easy transition if people are familiar with transpiling with Babel already. @@ -167,7 +164,7 @@ Babili Cons: - We released it early, so there aren't many users yet. Early adopters will have to deal with a tool that isn't as battle-tested as Uglify at first. - Right now, the performance is worse/size is worse than Uglify on our benchmark tests. However, this is something we'll be focusing on improving. -TL;DR: Babili should be able to keep up with the ECMAScript standard as new features get added as well as target the environments you need to support. It has a lot of potential: it may not be as production-ready as uglify at the moment since it was just released but as we continue to optimize with more users it should be more than capable. +TL;DR: Babili should be able to keep up with the ECMAScript standard as new features get added as well as target the environments you need to support. It has a lot of potential: it may not be as production-ready as Uglify at the moment since it was just released but as we continue to optimize with more users it should be more than capable. ## How to Help @@ -180,4 +177,4 @@ It's still early days for this project so there's a lot to help out with. - Project infrastructure/maintenance: We want to create more robust benchmarking, setup intergration tests on popular open source projects (run the minifier, and then run all the project's unit tests). - Check the output: If something can be more simplified, it should be straightfoward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. -Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and for Facebook allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James @thejameskyle](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project! +Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and Facebook for allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James @thejameskyle](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project! From 54a8c210ba19810ee9c4e0c22de292a3d1853bf6 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 15:31:31 -0400 Subject: [PATCH 14/28] typos --- _posts/2016-08-26-babili.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index a534f2d01a..0c5aff9fc9 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -174,7 +174,7 @@ It's still early days for this project so there's a lot to help out with. - Documentation: Explanations of each plugin - Testing on more codebases: This will help everyone greatly. Because a minifier runs on all code it has potential for a lot of edge cases/bugs not covered in our basic unit tests. Hopefully we can setup a way to report issues easily; now that the [repl](babeljs.io/repl/) supports the minifier it should be easier to reproduce/link bugs. In the future we will want to be able to specify specific plugins so we can pinpoint minimal reproduction steps. -- Project infrastructure/maintenance: We want to create more robust benchmarking, setup intergration tests on popular open source projects (run the minifier, and then run all the project's unit tests). -- Check the output: If something can be more simplified, it should be straightfoward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. +- Project infrastructure/maintenance: We want to create more robust benchmarking, setup integration tests on popular open source projects (run the minifier, and then run all the project's unit tests). +- Check the output: If something can be more simplified, it should be straightforward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and Facebook for allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James @thejameskyle](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project! From f66e530323e5431c04e08684bd7e4345447ae66b Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 15:37:12 -0400 Subject: [PATCH 15/28] fixes --- _posts/2016-08-26-babili.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 0c5aff9fc9..679e3bad6b 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -28,7 +28,7 @@ say babili At a basic level, [minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unnecessary characters from a program without changing its functionality -- things like comments, whitespace, newlines, and extra parentheses. Advanced minification works by transforming programs into smaller equivalents and by removing redundant or even unreachable code. -Minification is useful because it reduces the amount of code transferred from the server to the client. Because users download less, the page can load faster. +Minification is primarily useful for decreasing the size of the Javacript payload sent from the server to the client: users need to download less code to use your website. Advanced minification can also result in smaller parse time (less code to parse) and in some cases faster runtime (e.g. advanced optimizations like function inlining). ## Current minifiers @@ -42,9 +42,9 @@ As browsers implement more ES2015 features and we drop support for older browser That's where Babili comes in. -Babili is ES2015+ 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. +Babili is ES2015+ aware because it is built using the Babel toolchain. It is written as a set of babel plugins, consumable with the `babili` preset. -As 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 ES2016 to ES5. A transpiler is just a compiler so the same concepts to transform arrow functions can work to minify code. +Babel was originally a specific transpiler for ES2016 to ES5 (called 6to5). Babili is an example of the many kinds of projects that Babel that help with. ## Example From 80ba1318956378c861513fea36205d2c0fc4d684 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 17:12:11 -0400 Subject: [PATCH 16/28] Update 2016-08-26-babili.md --- _posts/2016-08-26-babili.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 679e3bad6b..83a279af09 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -64,7 +64,7 @@ Before, we might run Babel to transpile [the class into a function](http://babel ```js // ES2015 code -> Babel -> Uglify/Babili -> Minified ES5 Code -var Mangler=function a(b){_classCallCheck(this,a),this.program=b};Mangler(); +var a=function a(b){_classCallCheck(this,a),this.program=b};a(); ``` With Babili, you can just run the minifier which works on ES2015 code. From ffc00523c2152e14eccd91c339b124abbf393915 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 18:22:40 -0400 Subject: [PATCH 17/28] update date --- _posts/2016-08-26-babili.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 83a279af09..083e76a826 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -2,16 +2,18 @@ layout: post title: "Releasing Babili (beta)" author: Henry Zhu -date: 2016-08-26 09:30:00 +date: 2016-08-29 09:30:00 categories: announcements share_text: "Releasing Babili (beta)" --- # Babili (babel-minify) -We released [babili](https://github.com/babel/babili) as beta (0.0.1) yesterday under an MIT license! +We released [babili](https://github.com/babel/babili) as beta (0.0.1) a few days ago under an MIT license! -There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that. We also have a [#minify](https://babeljs.slack.com/messages/minify/) slack room! +There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that. + +> There's also a [#minify](https://babeljs.slack.com/messages/minify/) slack room! TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unwanted as people begin to ship ES6 to clients. Babili is also modular/flexible (it's a Babel preset and thus supports user plugins) and can be used as a preset or cli tool. Babili should also be able to do ES2015+ specific optimizations. From 1d8e255a3b1c0482a1b8f84a25c292bfa51bfde1 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 18:23:46 -0400 Subject: [PATCH 18/28] fixes --- _posts/2016-08-26-babili.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 083e76a826..7e1caf7ab0 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -9,7 +9,7 @@ share_text: "Releasing Babili (beta)" # Babili (babel-minify) -We released [babili](https://github.com/babel/babili) as beta (0.0.1) a few days ago under an MIT license! +We released [Babili](https://github.com/babel/babili) as beta (0.0.1) a few days ago under an MIT license! There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that. @@ -21,7 +21,7 @@ TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limit ```bash # sounds like "bah billy" -say babili +say Babili ``` > If you can't remember the name, babel-minify works too. @@ -84,7 +84,7 @@ In the future, we might make use of the ES2015+ syntax information we have at co ### Babel Preset -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. +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` From f74a818c150ee059fac1e77dc840c193e3428f4e Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 18:34:19 -0400 Subject: [PATCH 19/28] fixes --- _posts/2016-08-26-babili.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 7e1caf7ab0..b70f202585 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -15,7 +15,7 @@ There are a lot of (valid) questions about why a new minifier is a good idea, so > There's also a [#minify](https://babeljs.slack.com/messages/minify/) slack room! -TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unwanted as people begin to ship ES6 to clients. Babili is also modular/flexible (it's a Babel preset and thus supports user plugins) and can be used as a preset or cli tool. Babili should also be able to do ES2015+ specific optimizations. +TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unwanted as people begin to ship ES6 to clients. Babili is also modular/flexible (it is a [Babel preset](http://babeljs.io/docs/plugins/#presets) and thus supports user plugins) and can be used as a preset or cli tool. Babili should also be able to do ES2015+ specific optimizations. ## Pronunciation @@ -28,9 +28,9 @@ say Babili ## Why minify? -At a basic level, [minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unnecessary characters from a program without changing its functionality -- things like comments, whitespace, newlines, and extra parentheses. Advanced minification works by transforming programs into smaller equivalents and by removing redundant or even unreachable code. +At a basic level, [minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unnecessary characters from a program without changing its functionality -- things like comments, whitespace, newlines, and extra parentheses. Advanced minification may transform programs into smaller equivalents and remove redundant/unreachable code. -Minification is primarily useful for decreasing the size of the Javacript payload sent from the server to the client: users need to download less code to use your website. Advanced minification can also result in smaller parse time (less code to parse) and in some cases faster runtime (e.g. advanced optimizations like function inlining). +Minification is primarily useful for decreasing the size of the Javascript payload sent from the server to the client: users will download less code to use your website. Advanced minification can also result in shorter parse time (less code to parse) and in some cases faster runtime (e.g. advanced optimizations like function inlining). ## Current minifiers @@ -38,19 +38,20 @@ Tools such as [Uglify](https://github.com/mishoo/UglifyJS2) don't currently supp We currently use tools like Babel to compile ES2015 code down to ES5 code to support older browsers. Then we use something like Uglify to cut down on the bundle size. -As browsers implement more ES2015 features and we drop support for older browser versions, there is a sliding window of the version of ECMAScript you write in and the target ECMAScript version you compile/minify to. However because Uglify cannot parse ES2015, you would still have to compile down to ES5 anyway. +As browsers implement more ES2015 features and we drop support for older browser versions, there is a sliding window of the version of ECMAScript you write in and the target ECMAScript version you minify to. However since Uglify cannot parse ES2015+, you would still have to compile down to ES5 anyway. ## Babili That's where Babili comes in. -Babili is ES2015+ aware because it is built using the Babel toolchain. It is written as a set of babel plugins, consumable with the `babili` preset. +Babili is ES2015+ aware because it is built using the Babel toolchain. +It is written as a set of babel plugins, consumable with the [`babili` preset](https://github.com/babel/babili/tree/master/packages/babel-preset-babili). -Babel was originally a specific transpiler for ES2016 to ES5 (called 6to5). Babili is an example of the many kinds of projects that Babel that help with. +Babel was originally a specific transpiler for ES2016 to ES5 (called [6to5](http://babeljs.io/blog/2015/02/15/not-born-to-die)). Babili is an example of the many kinds of projects that Babel that help with. ## Example -Say we're targeting the latest versions of Chrome, Firefox and Safari -- all of which support ES2015 classes. Then, compiling ES2015 classes to a constructor function and prototype methods (ES5) results in more code (and potentially lose any optimizations browsers might have for classes). +Say we're targeting the latest versions of Chrome, Firefox and Safari -- all of which support [ES2015 classes](http://babeljs.io/docs/learn-es2015/#classes). Then, compiling ES2015 classes to a constructor function and prototype methods (ES5) results in more code (and potentially loses any optimizations browsers might have for classes). ```js class Mangler { From 20c119ac4b9ab72e18cac494ef04bc8a95acddb5 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 18:46:12 -0400 Subject: [PATCH 20/28] add example plugins, fix --- _posts/2016-08-26-babili.md | 51 ++++++++++++++++++++++++++++++++++--- 1 file changed, 47 insertions(+), 4 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index b70f202585..5675036a11 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -11,9 +11,9 @@ share_text: "Releasing Babili (beta)" We released [Babili](https://github.com/babel/babili) as beta (0.0.1) a few days ago under an MIT license! -There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that. +> Try it out in the Babel [REPL](http://babeljs.io/repl/#?babili=true&evaluate=false) and report any bugs or potential optimizations we can make! There's also a [#minify](https://babeljs.slack.com/messages/minify/) slack room! -> There's also a [#minify](https://babeljs.slack.com/messages/minify/) slack room! +There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that. TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unwanted as people begin to ship ES6 to clients. Babili is also modular/flexible (it is a [Babel preset](http://babeljs.io/docs/plugins/#presets) and thus supports user plugins) and can be used as a preset or cli tool. Babili should also be able to do ES2015+ specific optimizations. @@ -30,7 +30,7 @@ say Babili At a basic level, [minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unnecessary characters from a program without changing its functionality -- things like comments, whitespace, newlines, and extra parentheses. Advanced minification may transform programs into smaller equivalents and remove redundant/unreachable code. -Minification is primarily useful for decreasing the size of the Javascript payload sent from the server to the client: users will download less code to use your website. Advanced minification can also result in shorter parse time (less code to parse) and in some cases faster runtime (e.g. advanced optimizations like function inlining). +Minification is primarily useful for decreasing the size of the JavaScript payload sent from the server to the client: users will download less code to use your website. Advanced minification can also result in shorter parse time (less code to parse) and in some cases faster runtime (e.g. advanced optimizations like function inlining). ## Current minifiers @@ -81,6 +81,48 @@ Also it's important to note that this isn't specific to ES2015. Because Babel up In the future, we might make use of the ES2015+ syntax information we have at compile time (e.g. we know that given function is an arrow function or that a given binding is block-scoped etc) to do advanced optimizations. And we can make use of the knowledge that we're targeting an ES2015+ environment in creative ways. We're just getting started so let us know if you have any ideas! +### [Some of the Plugins](https://github.com/babel/babili#plugins-in-babel-preset-babili) + +To give an idea of some of the transforms: + +[babel-plugin-minify-constant-folding](https://github.com/babel/babili/tree/master/packages/babel-plugin-minify-constant-folding): + +Tries to evaluate expressions and inline the result. For now only deals with numbers and strings. + +```js +2 * 3; +"b" + a + "c" + "d" + g + z + "f" + "h" + "z" +``` + +```js +6; +"b" + a + "cd" + g + z + "fhz"; +``` + +[babel-plugin-minify-mangle-names](https://github.com/babel/babili/tree/master/packages/babel-plugin-minify-mangle-names): + +Context- and scope- aware variable renaming. + +```js +var globalVariableName = 42; +function foo() { + var longLocalVariableName = 1; + if (longLocalVariableName) { + console.log(longLocalVariableName); + } +} +``` + +```js +var globalVariableName = 42; +function foo() { + var a = 1; + if (a) { + console.log(a); + } +} +``` + ## Usage ### Babel Preset @@ -180,4 +222,5 @@ It's still early days for this project so there's a lot to help out with. - Project infrastructure/maintenance: We want to create more robust benchmarking, setup integration tests on popular open source projects (run the minifier, and then run all the project's unit tests). - Check the output: If something can be more simplified, it should be straightforward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. -Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and Facebook for allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James @thejameskyle](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project! +Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and Facebook for allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James (@thejameskyle)](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project! + From 3515f72c170b31a49c5748179c3a7dca659c9659 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 18:46:43 -0400 Subject: [PATCH 21/28] remove --- _posts/2016-08-26-babili.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 5675036a11..16665d86c5 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -47,8 +47,6 @@ That's where Babili comes in. Babili is ES2015+ aware because it is built using the Babel toolchain. It is written as a set of babel plugins, consumable with the [`babili` preset](https://github.com/babel/babili/tree/master/packages/babel-preset-babili). -Babel was originally a specific transpiler for ES2016 to ES5 (called [6to5](http://babeljs.io/blog/2015/02/15/not-born-to-die)). Babili is an example of the many kinds of projects that Babel that help with. - ## Example Say we're targeting the latest versions of Chrome, Firefox and Safari -- all of which support [ES2015 classes](http://babeljs.io/docs/learn-es2015/#classes). Then, compiling ES2015 classes to a constructor function and prototype methods (ES5) results in more code (and potentially loses any optimizations browsers might have for classes). From 6a4e355020af123093ac74a5a1fe49921a7711e9 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 19:27:21 -0400 Subject: [PATCH 22/28] Update 2016-08-26-babili.md --- _posts/2016-08-26-babili.md | 35 ++++++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 16665d86c5..1585346c18 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -77,7 +77,9 @@ class a{constructor(b){this.program=b}}new a; Also it's important to note that this isn't specific to ES2015. 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. -In the future, we might make use of the ES2015+ syntax information we have at compile time (e.g. we know that given function is an arrow function or that a given binding is block-scoped etc) to do advanced optimizations. And we can make use of the knowledge that we're targeting an ES2015+ environment in creative ways. We're just getting started so let us know if you have any ideas! +In the future, we might make use of the ES2015+ syntax information we have at compile time (e.g. we know that given function is an arrow function or that a given binding is block-scoped etc) to do advanced optimizations. And we can make use of the knowledge that we're targeting an ES2015+ environment in creative ways. + +We're just getting started so let us know if you have any ideas! ### [Some of the Plugins](https://github.com/babel/babili#plugins-in-babel-preset-babili) @@ -125,9 +127,9 @@ function foo() { ### Babel Preset -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. +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` +You will 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 @@ -156,14 +158,34 @@ $ npm install babili --save-dev ``` ```bash +$ babili src -d lib # equivalent to # babel src -d lib --presets=babili --no-babelrc -$ babili src -d lib ``` ### Webpack -You can either just use the preset option above with `babel-loader`, or use it seperately with the [babili-webpack-plugin](https://github.com/boopathi/babili-webpack-plugin) (made by [@boopathi](https://github.com/boopathi/), who also works on babili). +You can just use the preset with [`babel-loader`](https://github.com/babel/babel-loader). + +```bash +$ npm install babel-core babel-loader babel-preset-babili +``` + +```js +module: { + loaders: [ + { + test: /\.js$/, + loader: 'babel', + query: { + presets: ['babili'] + } + } + ] +} +``` + +Or use it seperately with the [babili-webpack-plugin](https://github.com/boopathi/babili-webpack-plugin) (made by [@boopathi](https://github.com/boopathi/), who also works on Babili). ```bash $ npm install babili-webpack-plugin --save-dev @@ -181,7 +203,7 @@ module.exports = { } ``` -We want to have a better story with integration with webpack/bundlers in the near future! Ref [#100](https://github.com/babel/babili/issues/100). +We want to have a better story with integration with webpack/bundlers in the near future! Also check out [#100](https://github.com/babel/babili/issues/100). ## Pros/Cons @@ -221,4 +243,3 @@ It's still early days for this project so there's a lot to help out with. - Check the output: If something can be more simplified, it should be straightforward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and Facebook for allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James (@thejameskyle)](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project! - From 2a59a47876844c9f6e7e68128575b718c3d71dda Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 19:30:59 -0400 Subject: [PATCH 23/28] title fixes --- _posts/2016-08-26-babili.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 1585346c18..3db858c412 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -1,14 +1,12 @@ --- layout: post -title: "Releasing Babili (beta)" +title: "Babili (babel-minify)" author: Henry Zhu date: 2016-08-29 09:30:00 categories: announcements -share_text: "Releasing Babili (beta)" +share_text: "Babili (babel-minify)" --- -# Babili (babel-minify) - We released [Babili](https://github.com/babel/babili) as beta (0.0.1) a few days ago under an MIT license! > Try it out in the Babel [REPL](http://babeljs.io/repl/#?babili=true&evaluate=false) and report any bugs or potential optimizations we can make! There's also a [#minify](https://babeljs.slack.com/messages/minify/) slack room! From 605e82d0ac26281fd3c9df0ed5d257708cca5e6d Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Mon, 29 Aug 2016 19:33:28 -0400 Subject: [PATCH 24/28] Update 2016-08-26-babili.md --- _posts/2016-08-26-babili.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 3db858c412..4ed0934bad 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -205,16 +205,16 @@ We want to have a better story with integration with webpack/bundlers in the nea ## Pros/Cons -Uglify Pros +**Uglify Pros** - No change to existing tooling if you are already minifying. - Battle-tested/production ready (been around for years, and has wide adoption so there's less bugs/issues). - It's fast and outputs small code already. -Uglify Cons +**Uglify Cons** - Custom parser/tooling, so difficult to output/minify ES2015+ and more. - Not modular, no way to create own plugins/minification strategies. -Babili Pros: +**Babili Pros:** - ES2015+ aware (nothing special needs to be done because we can use the babylon parser) and Babel will update as standards/browsers update. - Uses the existing Babel toolchain, can consume as a Babel preset or standalone. - Potential for custom smart transforms for React/Flow, etc. @@ -223,7 +223,7 @@ Babili Pros: - For example: [this](https://github.com/babel/babili/tree/master/packages/babel-plugin-transform-minify-booleans) just turns `true` into `!0` which is straightforward to write. - Should be an easy transition if people are familiar with transpiling with Babel already. -Babili Cons: +**Babili Cons:** - We released it early, so there aren't many users yet. Early adopters will have to deal with a tool that isn't as battle-tested as Uglify at first. - Right now, the performance is worse/size is worse than Uglify on our benchmark tests. However, this is something we'll be focusing on improving. @@ -235,9 +235,9 @@ TL;DR: Babili should be able to keep up with the ECMAScript standard as new feat It's still early days for this project so there's a lot to help out with. -- Documentation: Explanations of each plugin -- Testing on more codebases: This will help everyone greatly. Because a minifier runs on all code it has potential for a lot of edge cases/bugs not covered in our basic unit tests. Hopefully we can setup a way to report issues easily; now that the [repl](babeljs.io/repl/) supports the minifier it should be easier to reproduce/link bugs. In the future we will want to be able to specify specific plugins so we can pinpoint minimal reproduction steps. -- Project infrastructure/maintenance: We want to create more robust benchmarking, setup integration tests on popular open source projects (run the minifier, and then run all the project's unit tests). -- Check the output: If something can be more simplified, it should be straightforward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. +- **Documentation**: Explanations of each plugin +- **Testing on more codebases**: This will help everyone greatly. Because a minifier runs on all code it has potential for a lot of edge cases/bugs not covered in our basic unit tests. Hopefully we can setup a way to report issues easily; now that the [repl](babeljs.io/repl/) supports the minifier it should be easier to reproduce/link bugs. In the future we will want to be able to specify specific plugins so we can pinpoint minimal reproduction steps. +- **Project infrastructure/maintenance**: We want to create more robust benchmarking, setup integration tests on popular open source projects (run the minifier, and then run all the project's unit tests). +- **Check the output**: If something can be more simplified, it should be straightforward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and Facebook for allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James (@thejameskyle)](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project! From 1891d3f32c6271ce0d81159076310c24c3450b79 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Tue, 30 Aug 2016 10:10:10 -0400 Subject: [PATCH 25/28] fixes --- _posts/2016-08-26-babili.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 4ed0934bad..2c4a827025 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -2,7 +2,7 @@ layout: post title: "Babili (babel-minify)" author: Henry Zhu -date: 2016-08-29 09:30:00 +date: 2016-08-30 10:30:00 categories: announcements share_text: "Babili (babel-minify)" --- @@ -13,16 +13,18 @@ We released [Babili](https://github.com/babel/babili) as beta (0.0.1) a few days There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that. -TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unwanted as people begin to ship ES6 to clients. Babili is also modular/flexible (it is a [Babel preset](http://babeljs.io/docs/plugins/#presets) and thus supports user plugins) and can be used as a preset or cli tool. Babili should also be able to do ES2015+ specific optimizations. +TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unwanted as people begin to ship ES6 to clients. Babili is also modular/flexible (it is a [Babel preset](http://babeljs.io/docs/plugins/#presets) and thus supports user plugins) and can be used as a preset or CLI tool. Babili should also be able to do ES2015+ specific optimizations. ## Pronunciation ```bash -# sounds like "bah billy" +# sounds like "bah billy" or "Babadi" (from DBZ) say Babili ``` -> If you can't remember the name, babel-minify works too. +Babili is Babylon in Akkadian. + +> If you can't remember the name, babel-minify works too (made [an issue](https://github.com/babel/babili/issues/124) for the name). ## Why minify? @@ -43,7 +45,7 @@ As browsers implement more ES2015 features and we drop support for older browser That's where Babili comes in. Babili is ES2015+ aware because it is built using the Babel toolchain. -It is written as a set of babel plugins, consumable with the [`babili` preset](https://github.com/babel/babili/tree/master/packages/babel-preset-babili). +It is written as a set of Babel plugins, consumable with the [`babili` preset](https://github.com/babel/babili/tree/master/packages/babel-preset-babili). ## Example @@ -149,7 +151,7 @@ $ npm install babel-preset-babili --save-dev ### Babili CLI -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). You could run this after transpiling (or not) in place of Uglify. +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). You could run this after transpiling (or not) in place of Uglify. ```bash $ npm install babili --save-dev @@ -201,7 +203,7 @@ module.exports = { } ``` -We want to have a better story with integration with webpack/bundlers in the near future! Also check out [#100](https://github.com/babel/babili/issues/100). +We want to have a better story with integration with Webpack/bundlers in the near future! Also check out [#100](https://github.com/babel/babili/issues/100). ## Pros/Cons @@ -218,7 +220,7 @@ We want to have a better story with integration with webpack/bundlers in the nea - ES2015+ aware (nothing special needs to be done because we can use the babylon parser) and Babel will update as standards/browsers update. - Uses the existing Babel toolchain, can consume as a Babel preset or standalone. - Potential for custom smart transforms for React/Flow, etc. -- Could use flow/typescript annotations to help with minification. +- Could use Flow/Typescript annotations to enable advanced minification. - Each minification step can be split into its own plugin, and there’s plenty of options for customization. This makes it easier to contribute and to find/submit issues for specific problems. It also means that people can independently create their own experimental plugins before upstreaming them into core. - For example: [this](https://github.com/babel/babili/tree/master/packages/babel-plugin-transform-minify-booleans) just turns `true` into `!0` which is straightforward to write. - Should be an easy transition if people are familiar with transpiling with Babel already. @@ -236,7 +238,7 @@ TL;DR: Babili should be able to keep up with the ECMAScript standard as new feat It's still early days for this project so there's a lot to help out with. - **Documentation**: Explanations of each plugin -- **Testing on more codebases**: This will help everyone greatly. Because a minifier runs on all code it has potential for a lot of edge cases/bugs not covered in our basic unit tests. Hopefully we can setup a way to report issues easily; now that the [repl](babeljs.io/repl/) supports the minifier it should be easier to reproduce/link bugs. In the future we will want to be able to specify specific plugins so we can pinpoint minimal reproduction steps. +- **Testing on more codebases**: This will help everyone greatly. Because a minifier runs on all code it has potential for a lot of edge cases/bugs not covered in our basic unit tests. Hopefully we can setup a way to report issues easily; now that the [repl](https://babeljs.io/repl/) supports the minifier it should be easier to reproduce/link bugs. In the future we want options to enable specific plugins so we can pinpoint minimal reproduction steps. - **Project infrastructure/maintenance**: We want to create more robust benchmarking, setup integration tests on popular open source projects (run the minifier, and then run all the project's unit tests). - **Check the output**: If something can be more simplified, it should be straightforward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. From db9ed7ae70f8a12c310bc3f48323327fe05213d8 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Tue, 30 Aug 2016 10:12:17 -0400 Subject: [PATCH 26/28] fixes --- _posts/2016-08-26-babili.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index 2c4a827025..f426e26bce 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -13,7 +13,7 @@ We released [Babili](https://github.com/babel/babili) as beta (0.0.1) a few days There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that. -TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unwanted as people begin to ship ES6 to clients. Babili is also modular/flexible (it is a [Babel preset](http://babeljs.io/docs/plugins/#presets) and thus supports user plugins) and can be used as a preset or CLI tool. Babili should also be able to do ES2015+ specific optimizations. +TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unncessary as people begin to ship ES2015 to clients. Babili is also modular/flexible (being a [Babel preset](http://babeljs.io/docs/plugins/#presets) means it supports user plugins) and can be used as a preset or CLI tool. Babili will also be able to make ES2015+ specific optimizations. ## Pronunciation From 45a0dc56ae8a3e3e6e8e86dbbdb7d6a62cc81c69 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Tue, 30 Aug 2016 10:13:26 -0400 Subject: [PATCH 27/28] Update 2016-08-26-babili.md --- _posts/2016-08-26-babili.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index f426e26bce..a391c3878b 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -242,4 +242,4 @@ It's still early days for this project so there's a lot to help out with. - **Project infrastructure/maintenance**: We want to create more robust benchmarking, setup integration tests on popular open source projects (run the minifier, and then run all the project's unit tests). - **Check the output**: If something can be more simplified, it should be straightforward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset. -Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and Facebook for allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James (@thejameskyle)](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project! +Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and Facebook for allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James (@thejameskyle)](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want to give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project! From 3251f9d571d792c7473e0e6479655868795abb77 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Tue, 30 Aug 2016 10:50:16 -0400 Subject: [PATCH 28/28] Update 2016-08-26-babili.md --- _posts/2016-08-26-babili.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/_posts/2016-08-26-babili.md b/_posts/2016-08-26-babili.md index a391c3878b..423eb5df0b 100644 --- a/_posts/2016-08-26-babili.md +++ b/_posts/2016-08-26-babili.md @@ -2,7 +2,7 @@ layout: post title: "Babili (babel-minify)" author: Henry Zhu -date: 2016-08-30 10:30:00 +date: 2016-08-30 10:50:00 categories: announcements share_text: "Babili (babel-minify)" --- @@ -235,9 +235,10 @@ TL;DR: Babili should be able to keep up with the ECMAScript standard as new feat [Amjad](https://twitter.com/amasad) had been working on this project for a while but we decided to release it earlier as a beta to allow the community to test it out and both contribute through reporting bugs and patches. -It's still early days for this project so there's a lot to help out with. +It's still early days for this project so there's a lot to help out with! Our next priority is to make Babili more stable/robust for a 1.0.0 release. + +We will be working to get it as fast and produce code sizes as small as Uglify/[Closure Compiler](https://github.com/google/closure-compiler) in simple mode. -- **Documentation**: Explanations of each plugin - **Testing on more codebases**: This will help everyone greatly. Because a minifier runs on all code it has potential for a lot of edge cases/bugs not covered in our basic unit tests. Hopefully we can setup a way to report issues easily; now that the [repl](https://babeljs.io/repl/) supports the minifier it should be easier to reproduce/link bugs. In the future we want options to enable specific plugins so we can pinpoint minimal reproduction steps. - **Project infrastructure/maintenance**: We want to create more robust benchmarking, setup integration tests on popular open source projects (run the minifier, and then run all the project's unit tests). - **Check the output**: If something can be more simplified, it should be straightforward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset.