browserify - jqueryと依存するプラグインをどうにかしたい

こないだこういう記事書いたんですが、まったくなってない、完全に間違ってたので見直しました。

window.$ に exports するための browserify-shim

完全に勘違っていたんですが、browserify-shim はrequire('hoge')するためにシンボリックリンクを張るためのものじゃなかった。

なんというか、グローバルに外出し exports できるもんと認識しなおした。

package.json のdependencies, devDependenciesに書いてあるものであれば、まったく問題なくrequireできる。

hoge.js

var $ = require('jquery'); // もしnpmで入れてれば特にbrowserify系の記述は必要ない

生のjquery使うんならこれだけでいいっぽいけど、ただjqueryプラグイン使うなら結局exportsしないと使えなさそう。そこでbrowserify-shim。

package.json

{
  "browserify": {
    "transform": [
      "browserify-shim",
    ]
  },
  "browserify-shim": {
    "jquery": "$"
  }
}

jqueryの$をグローバルオブジェクトととして使えるようexportsしてよ、とpackage.json内にbrowserify用に記載しておけば、

hoge.js

require('jquery'); // var $ = require('jquery'); しなくてもexportされる

これで自由にjquery使える。ブラウザでアクセス、コンソールにjquery構文打ってデバッグも出来る。（ちなみに最初のほうだと、$('p') みたいなセレクタまではおっかけられるけど、$('p').addClass('hoge')みたいなのはコンソール上でできない。exportsしてないから当然なんだけど、なんとなく分かるような分からないような。）

jQueryプラグインどうしよう問題

上のから引き続き、

hoge.js

require('jquery');
require('jquery.plugin01');
require('jquery.plugin02');

みたいなことがしたかったら、npmでjqueryプラグインも入れてしまおう。package.jsonのdependencies, devDependencies に入っている名称がrequireできる。もうこの際bowerとかやめてnpm一本でいいじゃねーか。

カスタムしたjqueryのシンボリックをpackage.jsonで定義

して、require('jquery');もやりたい。
ajax省いたり、animation省いたりしてカスタムビルドしたjqueryを使いたい（npmで入れるとそれらを可能にするGruntfile.jsとかなしで落ちてくるのはなんでか気になってるんだけど ※jqueryカスタムビルド参考）、そんなときnode_modulesにもpackage.json にもjqueryなんかなくても、シンボリックをはることが出来る。

package.jspn

  "browser": {
    "jquery": "./vendor/jquery/dist/jquery.js" //カスタムjqueryを置いたとこ
  }

この時、package.jsonにjqueryがあったとしてもこちらが優先される様子。

AMD commonJS とかに対応してる jQueryプラグイン

この辺見てもらうと分かるんですが、こういった記載があると依存関係解決しようとしてプラグイン側で定義したjqueryもさらにbundleされたりするので、この辺のところもう少し調べておこうと思った。

---

少しgithubにもまとめた。本日は以上です。