Vue.js + vueify + browserify + Babel でビルドする方法


概要

vueify利用時にbabel-coreをインストールするので、*.vueファイル内はES2015形式でも記述できるのですが、それ以外のファイルはES5形式で書く必要があります。一部だけ記法が違うのも気持ち悪かったので、他のJSファイル内でもES2015形式で書けるようにする方法をまとめます。

用語説明

ES2015

ES2015とはJavaScriptの仕様バージョンのことで極端に言えばPHP5などと同じようなものです。現行のほとんどのブラウザはES5と呼ばれるバージョンになっていますが、ES2015から新しい文法が使えるようになります。別名ES6とも呼ばれています。(この辺が紛らわしい)

vueify

Vue.jsのコンポーネントを *.vue ファイルに分割することができます。また一つの .vue ファイル内でcss/template/scriptの3つを管理することができ見通しが良くなります。

browserify

ブラウザ動作用に記述したJavaScriptコード内で require('modules') が使えるようになります。

Babel

ES2015に対応したトランスコンパイラです。ES2015形式で書いたJavaScriptコードをES5に変換してくれます。

参考ソースコード

package.json

index.html

main.js

components/heaeder.vue

components/footer.vue

設定方法

必要パッケージのインストール

まずは Vue.js + vueify + browserify + Babel でビルドするために必要なパッケージを全てインストールします。

babel-core〜babel-runtime

これらのパッケージは vueify インストール時の必要パッケージとして要求されます。これらをインストールすることで、 *.vue 内ではES2015でコードを書くことができます。

babelify

browserify でBabel変換するためのパッケージです。

browserify.transform項目

refs: https://github.com/substack/browserify-handbook#browserifytransform-field

package.json内でbrowserify.transform項目を記述することで、browserifyが実行された際に自動的にtransform設定を適用することができます。今回の場合ですと、 vueifybabelily の2つを同時に適用したので下記のように記述します。

.babelrc

presets

babelで変換するバージョンを指定します

transform-runtime

babel-plugin-transform-runtime をインストールすると利用できるようになるbabel用プラグイン。似たようなものに babel-polyfill があるらしいがグローバル汚染するのことでこちらを利用するのがいいらしい。babel変換するのに必要。

参考 : babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた - Qiita

ビルド

package.jsonscriptsbuild を宣言しているので下記で実行できます。

結果、下記のように表示されれば成功です。

vuejs_babelify

本件のソースコードはこちらに置いてあります。

感想

正直随分ハマりましたが、これでES2015でコードが書けるようになって幸せです。(といいつつも全く書けません。勉強中です。)


シェアする

  • このエントリーをはてなブックマークに追加

フォローする