牌語備忘録 -pygo

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

牌語備忘録 -pygo

ReactJS と Browserify と reactify のメモ

Javascript

簡単にできると思ってたら Browserify で ./jsx/**/*.jsx みたいなディレクトリ以下のファイルを指定するのに悩んだんのでメモ

ソースコード

# ファイル構成
.
├── gulpfile.js
├── index.html
├── jsx
│   └── yo.jsx
└── package.json

gulpfile.js

var browserify = require('browserify');
var glob = require('glob');
var gulp = require('gulp');
var reactify = require('reactify');
var source = require("vinyl-source-stream");

gulp.task('browserify', function(){
    var src = glob.sync('./jsx/**/*.jsx');
    return browserify({
        entries: src,
        transform: [reactify]
    })
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./js'));
});

index.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Yo</title>
    </head>
    <body>
        <div id="contents"></div>

        <script src="js/app.js"></script>
    </body>
</html>

jsx/yo.jsx

/*globals React: true*/
var React = require('react');

React.render(
  <h1>Yo!</h1>,
  document.getElementById('contents')
);

package.json

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

インストール

$ npm install

JS を1ファイルにまとめる

$ node_modules/.bin/gulp browserify

表示する

index.html を Firefox で開く

f:id:CortYuming:20150620223424p:plain

追記

続き reactify から babelify に乗り替え

参考