Angular.jsでBrowserify対応するときに色々ハマったので、その備忘録。

Angular.jsの1.3.14以降、1.4以降はCommonJS形式でのライブラリのロードがサポートされており、基本的にはnpmで取ってきたangularに対して以下のようなコードを書いてBrowserifyを通します

fugaモジュールはこんな感じで書く↓(分割したモジュールの書き方は色々あります)

index.html↓

あとはbrowserifyで変換するだけ

gulp↓

bowerのライブラリも併用する場合

browserifyでbower経由で取得したライブラリも併用する場合は、debowerifyをtransformに指定すればOK

インストール↓

コマンド↓

gulpfileはこんな感じでdebowerifyのtransformを追加すればOK

debowerifyを使うときの注意

bowerのみで配布されておりangular.jsと依存関係にあるライブラリを利用する場合には、bower installでangular.jsもbower_components直下にインストールされてしまいます。この状態でdebowerifyを実行するとbower側のangular.jsが優先されてロードされてしまいます。

そうすると、bower側はCommonJS形式に非対応なので、requireの戻り値はundefinedになり

といったロードしたモジュールを変数に格納するような利用方法は出来ません。bowerのangularでrequire(‘angular’)を呼ぶとグローバルにangularが定義され、通常のscriptタグを読み込むのと同じ動作になります。(npmバージョンも同様にグローバルに定義されるものの、戻り値としてもangularオブジェクトを返してくれます)

かと言って、bower_components/angularディレクトリを削除すると、browserify起動時に以下のエラーが発生します。(おそらくコンパイル前に依存関係とか調べているのだと思われます)

そこで、debowerifyにはnpmをbowerよりも優先して読み込むオプションがあるので、これを利用します。

npmの最新バージョン(2016/02/07時点)ではpreferNPMの機能追加がされていないので、githubからインストールします。

コマンド↓

gulp↓

これでbowerとnpmに同一のライブラリが有ってもnpm側の設定を優先的に読み込むことが出来ます。まぁそもそも、こんなことしなくてもrequire(“node_modules/angular”)の直接パス指定で解決しちゃうんですが…。

その他

preferNPMとか使って無理やりnpmバージョン使わなくても、browserify-shimを使えばCommonJSスタイルに書き換えてくれます。(node_modules/angular/index.jsと同じようにmodule.exportsしてくれます)

package.json↓

gulpfile.js↓

debowerify使わない場合はpackage.jsonのbrowserフィールドにエイリアスを書かないと動かないので注意。

あと、browserifyのコマンドラインでオプション指定するところでハマりました…minimistというライブラリを利用しているっぽいので、オプションの指定方法はminimistを調べると良いです。