ES6 で書く環境（Babel + Browserify + gulp 編）＆ RxJS と jQuery の導入例

10728 ワード
JavaScript es6 gulp babel browserify JavaScript テキストリンク

自分的にはどの JavaScript ライブラリを試すにしても、この環境の上に目的のライブラリを載せるnのが一番効率が良いかなと思い、テンプレート化してみた。

テスト系が含まれていないが、学習目的ならこれで十分かと。

下記は補足です。

Node.jsモジュールの構成(package.json)

主要なのは browserify と、Babel 用のトランスパイラである babelify です。最悪この２つだけあれば、本 package.json の scripts の build に書いてあるようなコマンドを叩く(もしくはこの環境の場合は $ npm run build で実行できる)ことで ES6 から ES5 への変換および Browserify による Node.js ライブラリ（= npm コマンドでインストールした node_modules 配下のライブラリ）を含んだ形で、JavaScirpt ファイルがビルドされます（この例だと js/bundle.js としてビルドされる）。

browserify と babelify 以外の Node.jsモジュールは gulp によるファイルの変更監視＆自動変換用です（なので毎回、手動でコマンドを叩いてビルドするならば不要）。

package.json
{
  "name": "babel-browserify-gulp-sample",
  "version": "0.0.1",
  "devDependencies": {
    "browserify": "^10.2.1",
    "babelify": "^6.1.1",
    "gulp": "^3.8.11",
    "vinyl-source-stream": "^1.1.0",
    "gulp-webserver": "^0.9.1"
  },
  "scripts": {
    "build": "browserify --debug --transform babelify es6/app.es6 --outfile js/bundle.js"
  },
  "license": "MIT"
}

本環境は下記の環境から React.js を抜いただけなので、不明な点があれば下記を参考にしてください。

ライブラリ導入例①：RxJSを導入する場合

例えばこの環境に追加で RxJS を導入する場合は、次のように npm コマンドで導入し、利用したいシーンで import します。

インストール

$ npm install --save-dev rx

利用例

app.es6
import Rx from 'rx'

var arr = [1, 2 ,3];

// stream の定義
var hogeStream = Rx.Observable.from(arr)
  .map(
    // 各配列の値を３倍
    (n) => n * 3
  );

// stream の購読
hogeStream.subscribe(
  (n) => console.log(n)
);

ライブラリ導入例②：jQueryを導入する場合

同様に、みんな大好き jQuery の場合は次のように。

この方法だと、ブラウザで実行しない場合はエラーとなる（例えば $ node hoge.js のように実行した場合など）ので注意ください。

インストール

$ npm install --save-dev jquery

利用例

前出の RxJS と組み合わせてみます。

app.es6
import Rx from 'rx'
import $ from 'jquery'

// stream の定義。ボタンのクリックイベントを起点とする
var hogeStream = Rx.Observable.fromEvent($('#execute'), 'click')
  .flatMap(
    () => {
      // Qiitaの新着投稿１０件を取得
      let promise = $.ajax('http://qiita.com/api/v1/items?per_page=10');
      return Rx.Observable.fromPromise(promise);
    }
  );

// stream の購読
hogeStream.subscribe(
  (res) => {
    // 結果(複数件)に対して１件づつ処理
    res.forEach(
      (element, index, array) => {
        console.log(index + ":" + element.title);
      }
    );
  }
);
index.html
<!DOCTYPE html>
<html>
<head lang="ja">
  <meta charset="UTF-8">
</head>
<body>
<button id="execute">実行</button>
<script src="js/bundle.js"></script>
</body>
</html>

実行イメージ：

おわりに

慣れてしまうと ES6 + Browserify は便利なので手放せなくなるなりますね^^