この記事だいぶ間違っていたので、あらためて書き直しました。

browserify 使ってみてる

掲題の件

browserifyでjqueryならびに依存するプラグインなどをまとめてrequireしてみたけど、グローバルを汚染しないまま$をスコープに閉じ込める。これってどうなんだろう、いやそれでいいのか、という迷いが出てきた。

他所から触らせないって意味では、これでよい感がある。

ブラウザデバッグどうすんだ

じゃ、ブラウザでデバッグしたいときどうするんだろう。chrome dev toolのコンソールによくjqueryの構文を打ってデバッグする自分としては、どうテストしていいか分からない。開発時はjquery及びプラグイン.jsを直読みして、成果物はbrowserifyで吐き出したbundle.js読むとかそういうのがいいんだろうか。

まだきっちり答えが出てない。

他1点 browserify-shim と debowerify が一緒に使えない問題

jquery はbower経由じゃなくてカスタムビルドした軽めのものを使う、それと bower 経由でjqueryのプラグインを入れたい。みたいな状況下で、browerify-shimとdebowerify使ってシンボリックはり合うと競合して嫌になる。bower_componentsにjqueryも入れてくるプラグインとかあるじゃないですか（あったんです）。そうするとjqueryがぶつかってしまった。

package.json

{
  "browserify": {
    "transform": [
      "browserify-shim",
      "debowerify"
    ]
  },
  "browser": {
    "jquery": "./lib/vendor/jquery/dist/jquery.js"
  },
  "browserify-shim": {
    "jquery": "$"
  }
}

"jquery": "./lib/vendor/jquery/dist/jquery.js"がカスタムビルドしてるjquery。もちろんbower_compornentsにもjqueryがあるからぶつかるという感じ。

カスタムビルドのjqueryを外したくなかったので、debowerifyはやめて、browserディレクティブに使うものは全部書くみたいな感じにするということにした。

package.json

{
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "jquery": "./lib/vendor/jquery/dist/jquery.js",
    "jquery.plugin01": "./bower_components/jquery.plugin01/dist/jquery.plugin01.js",
    "jquery.plugin02": "./bower_components/jquery.plugin02/dist/jquery.plugin02.js"
  },
  "browserify-shim": {
    "jquery": "$"
  }
}

index.js

var $ = require('jquery');
require('jquery.plugin01');
require('jquery.plugin02');

これでぶつからない。

本日は以上です。