tです。前回に引き続き、Babelのプラグインについて紹介します。
ES2015などで記述して、Babelを使ってトランスパイルする時のコードの圧縮(ミニファイ)を行なう、Babili(babel-minify)についてです。
JavaScriptをミニファイするツールはいろいろありますが、ES2015のクラスなどの新しい構文に対応しているものは、見たことがありません。
Babiliを利用すれば、ES2015のクラスなどがそのままあってもミニファイできるので、便利です。
環境準備
Babiliを使ってどのように変換されるかを、「index.js」を使って見ていきます。以下の3つのファイルを、任意のディレクトリに準備してください。
|
1 2 3 4 |
/path/to/any/directory ├.babelrc ├index.js └package.json |
「package.json」では、以下のモジュールを導入する定義を記述しています。前回とほぼ同じですが、babel-preset-babiliを追加しています。
- babel-cli: トランスパイルを行なうコマンド
- babel-preset-env: 環境に合わせたトランスパイルを行なうプリセット
- babel-preset-babili: コードのミニファイを行なうプリセット
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "name": "babel-minify-example", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "build": "babel index.js --out-file compiled.js" }, "devDependencies": { "babel-cli": "^6.18.0", "babel-preset-babili": "^0.0.9", "babel-preset-env": "^1.1.4" } } |
「index.js」では、いくつかの新しいJavaScriptの文法や機能を記述しています。今回はべき乗とクラス構文のみにしています。
|
1 2 3 4 5 6 7 8 9 10 11 |
// べき乗演算子 const a = 3 ** 3; console.log( a ); // クラス定義 class A { constructor() { this.a = 1; } } console.log( new A ); |
「.babelrc」では、babel-preset-env及び、babel-preset-babiliを使ってトランスパイルを行なう定義をしています。前回のファイルに、babel-preset-babiliを加えただけです。
以下のような順番で指定すると、babel-preset-babili→babel-preset-envの順にトランスパイルが行われるようです。
|
1 2 3 4 5 6 7 8 9 10 |
{ "presets": [ [ "env", { "targets": { "node": "current" } } ], "babili" ] } |
ファイルの準備ができたら、「npm i」を実行して、モジュールをインストールします。
トランスパイル結果
今回は、Node.jsの7.3.0でトランスパイルしています。「npm run build」してください。そうすると、トランスパイル後のコードが「compiled.js」に生成されます。
|
1 2 3 |
"use strict";// べき乗演算子 const a=27;console.log(a);// クラス定義 class A{constructor(){this.a=1}}console.log(new A); |
クラス構文のままでもミニファイされていること、べき乗の計算が定数になっていることがわかります。
.babelrcでbabel-preset-babiliの順番を変えたときの落とし穴
以下のように先にbabiliを記述すると、babel-preset-env→babel-preset-babiliの順番でトランスパイルされてしまうようで、べき乗が定数になりません。|
1 2 3 4 5 6 7 8 9 10 |
{ "presets": [ "babili", [ "env", { "targets": { "node": "current" } } ] ] } |
上記の.babelrcでトランスパイルすると以下のようになります。
|
1 2 3 |
"use strict";// べき乗演算子 const a=Math.pow(3,3);console.log(a);// クラス定義 class A{constructor(){this.a=1}}console.log(new A); |
先にbabel-preset-babiliによってミニファイしたほうが、このべき乗の場合のように、変換前の状態で最適化できるので、良いと思います。
最後に
今回は、BabelでJavaScriptをミニファイするBabiliついて紹介しました。まだ、Babiliはベータ版という扱いで、圧縮率だけを見ると、他のミニファイツールには及ばないようです。しかし、Babelを既に使っている環境であれば、簡単に導入できるので、試してみてはいかがでしょうか。
キー・ポイントでは、いろいろなライブラリを使いこなすエンジニアを募集しています。
