Help us understand the problem. What is going on with this article?

ES6 で書く環境(Babel + Browserify + gulp 編)& RxJS と jQuery の導入例

More than 3 years have passed since last update.

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

https://github.com/hkusu/babel-browserify-gulp-sample

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

下記は補足です。

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

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

browserifybabelify 以外の 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(
    // 各配列の値を3倍
    (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の新着投稿10件を取得
      let promise = $.ajax('http://qiita.com/api/v1/items?per_page=10');
      return Rx.Observable.fromPromise(promise);
    }
  );

// stream の購読
hogeStream.subscribe(
  (res) => {
    // 結果(複数件)に対して1件づつ処理
    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>

実行イメージ:

スクリーンショット 2015-06-04 16.45.59.png

おわりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away