browserifyでjQuery(CDN)とjQueryプラグインを使う

tec

jQueryをCDNから取得し、jQuery pluginが活躍している場合のbrowserify導入の備忘録

CDNのjQueryをrequireする

CDNを使うことで、browserifyでbundleするファイルサイズは小さくなり、ファイル生成までの時間も短くなるという恩恵がある。

まず、CDNのjQueryを利用するのにbrowserify-shimを使う。
globalのjQueryを「jquery」というモジュール名でrequireできるようにする。

requireでincludeするjqueryはglobal(window)空間に存在しているので、
実際にはrequireなどせずとも使えるといえば使える。

require をするには以下の理由があるらしい。

  • require(‘jquery’)に統一することでwindow.jQueryというグローバルな名前空間へのアクセスを避け、依存解決方法を統一できる
  • 将来的にnpmパッケージとして運用する場合に、コードに変更がいらない
  • require することでディレクトリ構造などが変わる変更が生じても、その影響を受けにくくなる。

browserifyを実行すると

となり、globalのjQueryをrequireしているのがわかる。

だが、node_modules配下にjQueryをrequireしているパッケージがある場合は、以下のようになる。

解決するにはいずれか、

  1. 素直にjQueryをnpm installしてdependenciesに追加する
  2. shim を作成して、jQueryをexportsする

1 の場合は、結局CDNから取得するjQueryを使うわけではなく、npmでinstallしたjQueryを使うことになるため今回の目的に沿わない。

2 で対応する。jquery_shim.jsを作りmodule.exportsにglobalのjQueryを渡すようにする。

そして、 browserフィールド追加してにaliaseを作成

これにより、以下のようなスクリプトを作成できるのでCDNの恩恵を受けることができる。
requireの引数にjqueryが追加されglobalのjQueryをexportしているのがわかる。

とこれでまずはjQueryはCDNの恩恵を受けることができる。

jQuery pluginの対応

jquery pluginもnpmから取得できるので、bowerを使用することなくnpm経由で直接installからexportsできる。
(Welcome, jQuery developers!)

任意のjquery.pluginと自作モジュールのmy_module.jsを利用するとした場合、

ここではjquery.pluginをjqueryPluginでexport、
my_module.jsをmyModuleとしてexportしている。

それぞれ、require(‘jquery_plugin’)、require(‘myModule’)とすることで利用出来る。

module 形式でない package の場合でも、browserify -r jquery_plugin で require オプションを使うことで requireできるようになるのでとりあえずなんとかなる。

browserify (browser-pack) はどんなコードを出力するのか？あたりが詳しい。

サイトの規模によってはbrowserifyを利用して全てのファイルをまとめてしまうと、ファイルサイズが気になる。

たとえば、サイト全体で使う共通のモジュールやユーティリティ的なものをbrowserifyでrequireできるようにしておく。

各ページごとに必要な処理の多くはDOMをゴニョゴニョするものなどが多いと思うが、
こういったものは複数人で開発・運用などしているといろんな人が変更を行うので、
コアになる部分以外はあまりややこしなく扱えるようにしておきたい。

意図しないグローバルを汚染をしない程度にとどめておく程度にしておくとかでもいいのではないだろうかと。

お手軽に browserify-cdn もある。

参考にしたページ

Comments