牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

ReactJS と Browserify と babelify のメモ

前回『ReactJS と Browserify と reactify のメモ』 の続き。
なにやら reactify から babelify に乗り替えた方が良さげ みたいなので変更する。
あと watch もできるようにする。

変更するコード

gulpfile.js

var babelify = require('babelify');
var browserify = require('browserify');
var glob = require('glob');
var gulp = require('gulp');
var source = require("vinyl-source-stream");
var is_enable_source_maps = true;
var jsx_path = './jsx/**/*.jsx';

gulp.task('browserify', function() {
    var src = glob.sync(jsx_path);
    return browserify(src, { debug: is_enable_source_maps })
        .transform(babelify)
        .bundle()
        .on("error", function (err) { console.log("Error : " + err.message); })
        .pipe(source('app.js'))
        .pipe(gulp.dest('./js'));
});

gulp.task('watch', function() {
    gulp.watch(jsx_path, ['browserify']);
});

package.json

{
  "devDependencies": {
    "babelify": "^6.1.2",
    "browserify": "^10.2.4",
    "glob": "^5.0.10",
    "gulp": "^3.9.0",
    "react": "^0.13.3",
    "vinyl-source-stream": "^1.1.0"
  }
}

面倒なので node_modules ディレクトリ削除して npm install やり直す

実行

jsx を js に変換して app.js にまとめる

$ node_modules/.bin/gulp browserify

watch する

$ node_modules/.bin/gulp watch

参考