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 を使うといった運用がよさげですね。