watchifyとbrowserifyで、jqueryとbootstrapをrequireしても依存関係が解決できない #error

watchify, browserifyを使ってjquery, bootstrap, handlebarsをrequireしたのですが、泥沼にハマりました。私は下記のように読み込む順番にだけ気をつけてrequireすればいいのかと思っていました。

require './jquery'
require './bootstrap'
require './handlebars'

しかし、Uncaught Error: Bootstrap's JavaScript requires jQueryとchromeのコンソールに表示されます。なのでrequireしたものをグローバルオブジェクトに代入しました。

window.jQuery = $ = require './jquery'
require './bootstrap'
require './handlebars'

すると今度は、Uncaught ReferenceError: Handlebars is not definedとエラーが。次は定義されていないと言われているHandlebarsという変数を作り、そこにrequireしたものを入れてみました。

window.jQuery = $ = require './jquery'
require './bootstrap'
Handlebars = require './handlebars'

これでエラーがなくなり依存関係も解決しました。おそらく、bundleされたものが無名関数にラッピングされていたので、bootstrapからjqueryが参照できなかったのだと思います。また、Handlebarsはわざわざ変数を自前で用意する必要がありました。requireしただけではダメなようです。

今回はかなり時間がかかってしまいショックです。nodejsのrequireについて先に把握する必要がありますね。ですが、毎回泥沼にハマるたびに海外サイトを漁るようになってきたので、英語力がついてきたかと思います。