babili は、 JavaScript を圧縮して、サイズを軽量化するためのツールです。

YUI Compressor をはじめ、 JavaScript の圧縮ツールは数多く存在しますが、 babili は Babel と連携させて、 ES2015/ES6 や React(React.js) の構文をトランスパイル(古いブラウザで読めるように変換) をすることができます。

インストール方法

## package.json が無い場合は生成しておく
## npm init .

npm install --save-dev babili

Node.js v4 以降が必要です。
プロジェクトごとにトランスパイルの方針が異なる場合もあるので、ローカルにインストールすることをおすすめします。

利用方法

例として、 EC-CUBE3 の JavaScript を圧縮してみます。
html/template/default/js.min に圧縮後のファイルを出力します。


cd path/to/ec-cube
node_modules/.bin/babili html/template/default/js -d html/template/default/js.min

約40〜50% 程度のサイズに圧縮されました。


ls -al html/template/default/js html/template/default/js.min
html/template/default/js:
total 72
drwxrwxrwx  5 nanasess  staff    170  1 10 17:36 .
drwxrwxrwx  7 nanasess  staff    238  2 20 10:28 ..
-rw-rw-rw-  1 nanasess  staff  20401  1 10 17:36 eccube.js
-rw-rw-rw-  1 nanasess  staff  12470  1 10 17:35 function.js
drwxrwxrwx  9 nanasess  staff    306  1 10 17:35 vendor

html/template/default/js.min:
total 40
drwxr-xr-x  5 nanasess  staff   170  2 20 10:56 .
drwxrwxrwx  7 nanasess  staff   238  2 20 10:28 ..
-rw-rw-rw-  1 nanasess  staff  8377  2 20 10:20 eccube.js
-rw-rw-rw-  1 nanasess  staff  6512  2 20 10:20 function.js
drwxr-xr-x  9 nanasess  staff   306  2 20 10:03 vendor

まとめ

EC-CUBE をちょっとカスタマイズする分には、 jQuery くらいで十分、、かもしれませんが、フロントエンドを充実させようとすると、どうしても JavaScript フレームワークや、最新の構文を使いたくなってきます。 React や、最新の ES2015/ES6 の構文で開発して、本番環境では babili を使うといった運用がよさげですね。

参考

https://babeljs.io/blog/2016/08/30/babili