An ES6+ aware minifier based on the Babel toolchain.
-
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
- node >= 4
- babel-core >= 6.19.0
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
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 bootstrapBuild:npm run build
Running the benchmarks:
./scripts/benchmark.js <package>[@version] [relative-path/file.js]- defaults to the package's main file if no file provided.
Backbone.js v1.2.3:
raw raw win gzip gzip win parse time run
babili 21.72kB 222% 7.27kB 170% 2ms 859ms
uglify 21.79kB 221% 7.29kB 169% 3ms 314ms
closure 21.67kB 223% 7.37kB 167% 2ms 1635ms
closure js 24.01kB 191% 8.04kB 144% 2ms 4189ms
Run with: ./scripts/benchmark.js backbone@1.2.3
React v0.14.3:
raw raw win gzip gzip win parse time run
closure 171.46kB 265% 52.97kB 168% 14ms 4131ms
uglify 176.36kB 255% 53.13kB 167% 12ms 1654ms
babili 176.59kB 255% 53.23kB 166% 15ms 4641ms
closure js 173.95kB 260% 53.53kB 165% 11ms 13792ms
Run with: ./scripts/benchmark.js react@0.14.3 react/dist/react.js
jQuery v1.11.3:
raw raw win gzip gzip win parse time run
uglify 94.27kB 218% 32.78kB 158% 11ms 1394ms
babili 94.6kB 217% 32.86kB 157% 16ms 5348ms
closure 94.23kB 218% 33.38kB 153% 12ms 3152ms
closure js 95.64kB 213% 33.78kB 150%
7139
10ms 14145ms
Run with: ./scripts/benchmark.js jquery@1.11.3
Three.js:
raw raw win gzip gzip win parse time run
closure 472.57kB 107% 122.22kB 61% 29ms 4100ms
uglify 478.79kB 104% 122.53kB 61% 28ms 3648ms
closure js 480.11kB 104% 123.44kB 60% 28ms 64889ms
babili 507.96kB 93% 127.85kB 54% 33ms 9282ms
Run with: ./scripts/benchmark.js three@0.82.1 three/build/three.js
Babili is best at targeting latest browsers (with full ES6+ support) but can also be used with the usual Babel es2015 preset to transpile down the code first.
Babili requires Babel 6.14+
|
|
|
---|---|---|---|---|
Amjad Masad | Boopathi Rajaa | Juriy Zaytsev | Henry Zhu |
@amasad | @boopathi | @kangax | @hzoo
@amasad | @heisenbugger | @kangax | @left_pad