BabiliでBabelのコードを圧縮する

2016.12.28.水 JavaScript

tです。前回に引き続き、Babelのプラグインについて紹介します。
ES2015などで記述して、Babelを使ってトランスパイルする時のコードの圧縮(ミニファイ)を行なう、Babili(babel-minify)についてです。

JavaScriptをミニファイするツールはいろいろありますが、ES2015のクラスなどの新しい構文に対応しているものは、見たことがありません。
Babiliを利用すれば、ES2015のクラスなどがそのままあってもミニファイできるので、便利です。

環境準備

Babiliを使ってどのように変換されるかを、「index.js」を使って見ていきます。
以下の3つのファイルを、任意のディレクトリに準備してください。

「package.json」では、以下のモジュールを導入する定義を記述しています。前回とほぼ同じですが、babel-preset-babiliを追加しています。

  • babel-cli: トランスパイルを行なうコマンド
  • babel-preset-env: 環境に合わせたトランスパイルを行なうプリセット
  • babel-preset-babili: コードのミニファイを行なうプリセット

「index.js」では、いくつかの新しいJavaScriptの文法や機能を記述しています。今回はべき乗とクラス構文のみにしています。

「.babelrc」では、babel-preset-env及び、babel-preset-babiliを使ってトランスパイルを行なう定義をしています。前回のファイルに、babel-preset-babiliを加えただけです。

以下のような順番で指定すると、babel-preset-babili→babel-preset-envの順にトランスパイルが行われるようです。

ファイルの準備ができたら、「npm i」を実行して、モジュールをインストールします。

トランスパイル結果

今回は、Node.jsの7.3.0でトランスパイルしています。

「npm run build」してください。そうすると、トランスパイル後のコードが「compiled.js」に生成されます。

クラス構文のままでもミニファイされていること、べき乗の計算が定数になっていることがわかります。

.babelrcでbabel-preset-babiliの順番を変えたときの落とし穴

以下のように先にbabiliを記述すると、babel-preset-env→babel-preset-babiliの順番でトランスパイルされてしまうようで、べき乗が定数になりません。

上記の.babelrcでトランスパイルすると以下のようになります。

先にbabel-preset-babiliによってミニファイしたほうが、このべき乗の場合のように、変換前の状態で最適化できるので、良いと思います。

最後に

今回は、BabelでJavaScriptをミニファイするBabiliついて紹介しました。

まだ、Babiliはベータ版という扱いで、圧縮率だけを見ると、他のミニファイツールには及ばないようです。しかし、Babelを既に使っている環境であれば、簡単に導入できるので、試してみてはいかがでしょうか。

キー・ポイントでは、いろいろなライブラリを使いこなすエンジニアを募集しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です