An ES6+ aware minifier based on the Babel toolchain.
-
NOTE: We are in a feature freeze as we're trying to hammer out all the bugs to get to beta release. The best way to contribute is to test, report bugs, and add test cases.
-
Checkout our CONTRIBUTING.md if you want to help out!
-
babili is consumable via API, CLI, or babel preset.
-
Try it online - babeljs.io/repl
Current tools don't support targeting the latest version of ECMAScript. (yet)
- Babili can because it is just a set of Babel plugins, and Babel already understands new syntax with our parser Babylon.
- 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.
Check out our blog post for more info!
// Example ES2015 Code
class Mangler {
constructor(program) {
this.program = program;
}
}
new Mangler(); // without this it would just output nothing since Mangler isn't usedBefore
// ES2015+ code -> Babel -> Babili/Uglify -> Minified ES5 Code
var a=function a(b){_classCallCheck(this,a),this.program=b};new a;After
// ES2015+ code -> Babili -> Minified ES2015+ Code
class a{constructor(b){this.program=b}}new a;| Package | Version | Dependencies |
|---|---|---|
babili |
 |
 |
This is simple wrapper around the regular babel-cli and thus takes in the same cli options as running babel on its own. You can use this if you don't already use babel or want to run it standalone.
babili src -d lib
Equivalent to:
babel src -d lib --presets=babili --no-babelrc
| Package | Version | Dependencies |
|---|---|---|
babel-preset-babili |
 |
 |
It's a Babel preset (like babel-preset-es2015).
You'll most likely want to use it only in the production environment. Check out the env docs for more help.
Options specific to a certain environment are merged into and overwrite non-env specific options.
.babelrc:
{
"presets": ["es2015"],
"env": {
"production": {
"presets": ["babili"]
}
}
}
Then you'll need to set the env variable which could be something like BABEL_ENV=production npm run build
Plugins (in babel-preset-babili)
The babili repo is comprised of many npm packages. It is a lerna monorepo similar to babel itself.
The npm package babel-preset-babili is at the path packages/babel-preset-babili
Normally you wouldn't be consuming the plugins directly since the preset is available.
Add to your .babelrc's plugins array.
{
"plugins": ["babel-plugin-transform-undefined-to-void"]
}
Bootstrap:
npm run bootstrap
Build:
npm run build
Running the benchmarks:
./scripts/benchmark.js file.js
Backbone.js:
raw raw win gzip gzip win parse time run
uglify 21.79kB 221% 7.29kB 169% 1ms 247ms
closure 21.67kB 223% 7.37kB 167% 2ms 1223ms
babili 21.9kB 219% 7.46kB 164% 2ms 722ms
closure js 24.01kB 191% 8.04kB 144% 2ms 3301ms
Run with: ./scripts/benchmark.js ./scripts/fixtures/backbone.js
React:
raw raw win gzip gzip win parse time run
closure 171.46kB 265% 52.97kB 168% 14ms 2457ms
uglify 176.36kB 255% 53.13kB 167% 12ms 1367ms
closure js 173.95kB 260% 53.53kB 165% 12ms 11846ms
babili 177.87kB 252% 55.41kB 156% 13ms 3059ms
Run with: ./scripts/benchmark.js ./scripts/fixtures/react.js
jQuery:
raw raw win gzip gzip win parse time run
uglify 94.27kB 218% 32.78kB 158% 6ms 955ms
closure 94.23kB 218% 33.38kB 153% 18ms 1760ms
closure js 95.64kB 213% 33.78kB 150% 8ms 9295ms
babili 102.74kB 192% 35.3kB 139% 8ms 2912ms
Run with: ./scripts/benchmark.js ./scripts/fixtures/jquery.js