babelifyでv7.x系を利用する

babelifyでv7.x系を利用する

前回の記事で「babelifyの最新バージョンは7.x系だけど私の環境だと上手く動かないので@6.4を利用し」と書いたのですがオフィシャルのドキュメントがアップデートされたので対応方法について解説します。

babelify 7.0以上、正確にはbabelの6.0以上ではプラグイン(Pluings)かプラグインのパッケージであるプリセット(Presets)を指定する必要があります。babelifyの7.0からbabel-coreが6.0以上にアップデートされた為、Presetsかpluginsを指定する必要が出てきました。

Presetsを利用

ES6への全変換を行うのでbabel-preset-es2015をインストールします。

まず以下のコマンドでbabel-preset-es2015のインストールを行います。

npm install babel-preset-es2015

次に、以下の内容の書かれた.babelrcファイルを作成します。

{
  "presets": ["es2015"]
}

これでbabelifyでv7.x系が利用できるようになります。

Pluings/Presetsの利点

Pluings/Presets化された利点としては利用するES6文法を限定できる点です。

例えばimport/exportのみを利用したい場合はtransform-es2015-modules-commonjsプラグインのみを読み込むだけで良いです。

npm install babel-plugin-transform-es2015-modules-commonjs
{
  "plugins": ["transform-es2015-modules-commonjs"]
}

よくあるプラグインの組み合わせを集めたのがPresetsであり、es2015は全部入りのPresetsとなります。

このように利用する機能を絞ることで恐らくコンパイルの高速化が見込めるのではないでしょうか?

また、ES6 Module のプラグインはCommonJS以外にAMD用のプラグインも用意されている為、好みによってプラグインを組み替えることもできるようになったようです。

便利になっているのですが、めんどくさくなってきたなというのが正直な感想です。

参考:Babelを6系にアップデートしたらgulpでこける - Qiita

関連エントリー

Babelで始めるES6入門
タスクランナーgulp入門
gulpでJavaScriptの結合圧縮処理
Gruntで始めるWeb制作の自動化
CSSスプライトを生成する「grunt-spritesmith」

スポンサードリンク

«babelifyで始めるES6 | メイン | 今どきのCSS3グラデーションの指定方法 (2015年版)»