--- title: ES6 で書く環境(Babel + Browserify + gulp 編)& RxJS と jQuery の導入例 tags: gulp babel es6 JavaScript browserify author: hkusu slide: false --- 自分的にはどの JavaScript ライブラリを試すにしても、この環境の上に目的のライブラリを載せるnのが一番効率が良いかなと思い、テンプレート化してみた。 https://github.com/hkusu/babel-browserify-gulp-sample > テスト系が含まれていないが、学習目的ならこれで十分かと。 下記は補足です。 ## Node.jsモジュールの構成(package.json) 主要なのは `browserify` と、Babel 用のトランスパイラである `babelify` です。最悪この2つだけあれば、本 package.json の `scripts` の `build` に書いてあるようなコマンドを叩く(もしくはこの環境の場合は `$ npm run build` で実行できる)ことで ES6 から ES5 への変換および Browserify による Node.js ライブラリ(= npm コマンドでインストールした `node_modules` 配下のライブラリ)を含んだ形で、JavaScirpt ファイルがビルドされます(この例だと `js/bundle.js` としてビルドされる)。 `browserify` と `babelify` 以外の Node.jsモジュールは gulp によるファイルの変更監視&自動変換用です(なので毎回、手動でコマンドを叩いてビルドするならば不要)。 ```json: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 を抜いただけなので、不明な点があれば下記を参考にしてください。 - https://github.com/hkusu/react-babel-browserify-gulp-sample - [React.js + Babel + Browserify + gulp の環境を作ってみた](http://qiita.com/hkusu/items/e068bba0ae036b447754) ## ライブラリ導入例①:RxJSを導入する場合 例えばこの環境に追加で [RxJS](https://github.com/Reactive-Extensions/RxJS) を導入する場合は、次のように npm コマンドで導入し、利用したいシーンで import します。 ### インストール ```shell: $ npm install --save-dev rx ``` ### 利用例 ```javascript: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` のように実行した場合など)ので注意ください。 ### インストール ```shell: $ npm install --save-dev jquery ``` ### 利用例 前出の RxJS と組み合わせてみます。 ```javascript: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); } ); } ); ``` ```html:index.html ``` 実行イメージ: ![スクリーンショット 2015-06-04 16.45.59.png](https://qiita-image-store.s3.amazonaws.com/0/35733/687bdf04-f79a-4fc9-2c50-7aff27b8d78e.png "スクリーンショット 2015-06-04 16.45.59.png") ## おわりに 慣れてしまうと ES6 + Browserify は便利なので手放せなくなるなりますね^^