あーes20xxでーreactでーbrowserifyだかwebpackでーファイルの更新監視してーブラウザも更新してー
のためにググったりしながら気がつくとpackage.jsonが

  "devDependencies": {
    "@kjirou/utils": "0.0.3",
    "autoprefixer": "6.5.3",
    "babel-core": "6.18.2",
    "babel-plugin-espower": "2.3.1",
    "babel-preset-es2016": "6.16.0",
    "babel-preset-react": "6.16.0",
    "babel-register": "6.18.0",
    "babelify": "7.3.0",
    "browser-sync": "2.18.2",
    "browserify": "13.1.1",
    "dictify": "1.1.0",
    "eslint": "3.12.2",
    "espower-loader": "1.2.0",
    "fixpack": "2.3.1",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.1",
    "gulp-postcss": "6.2.0",
    "gulp-rename": "1.2.2",
    "gulp-sass": "2.3.2",
    "jsdoc": "3.4.3",
    "keymirror": "0.1.1",
    "mocha": "3.2.0",
    "node-notifier": "4.6.1",
    "power-assert": "1.4.2",
    "react": "15.4.1",
    "react-dom": "15.4.1",
    "react-redux": "4.4.6",
    "redux": "3.6.0",
    "redux-create-reducer": "1.1.1",
    "redux-thunk": "2.1.0",
    "run-sequence": "1.2.2",
    "sanitize.css": "4.1.0",
    "string": "3.3.3",
    "uuid": "3.0.1",
    "vinyl-source-stream": "1.1.0",
    "watchify": "3.7.0"
  },

とかなんとかなってて、よーわからんってなってはいないか？おれはなっている。

そんなpackage.jsonにありがちなモジュールのうちbrowserify関連のものを理解しようと思ったのが、このエントリー。
「具体的に連携させるために何をするのか」はこのエントリーでは扱わない。

図解 reactがbabelでbrowserify！

図にするとこんな感じだろう

この図があっていれば

大枠としては「書いたJSを(brwserifyで)browserifyする」ことであるのがわかる
その過程で書いたJSは「transformという仕組みを経由してbabelでtranspileされる」
babelは当然brwserifyと依存が無いので「間を繋いでいるのがbabelify」
- babelifyはbrowserifyのtオプション経由で指定され、transformerとして中で振る舞う

その他

babel + babel-preset-xxx はbrowserifyと関係無いので、覚えておけば他のバンドラーとかでも使いまわせる
watchifyはbrowserifyするファイルが更新されたら上記の流れでbrowserifyするやつ
browsersyncは指定されたファイルが更新されたらブラウザを更新するやつ

付録

browserifyのトランスフォーマー一覧
- https://github.com/substack/node-browserify/wiki/list-of-transforms