WordPress等のCMSがjQuery等を出力するとき、browserifyで上手いことやる。

最近、jsでrequireが無いと生きれない身体になってしまいました。

CoffeeScriptから卒業して、ES6でコードを書くようにもしています。ES6のClass構文とかアロー関数が無いと人生辛くなってきました。

そんなわけで自分はbrowserifyを使ってコードを書いてます。requireを良い感じにコンパイルして1つのファイルにまとめてくれる奴です。

そんなときに結構困るのがwp_head()や、wp_footer()からscriptタグでjQueryunderscore.jsBackbone.js等の有名処のライブラリが出力される場合があることです。

functions.phpで無理矢理消しても良いのですがそれは筋が悪そうなので、browserify-shimを使って指定されたライブラリはグローバル変数のものを使うようにします。

そのコードがこんな感じ。

gist: https://gist.github.com/torounit/0da591b62d03187b4641

package.json

gulpfile.js

タスク

といった格好になります。

browserify-shim

browserifyには、transformというAPIがありまして、ここにプラグインを突っ込むことが出来ます。

アプリケーションコード上のJSから呼び出せるのは通常、node_modulesにインストールされているものか、ファイル名で指定されたJSのみですが、require(‘jquery’) のようなコードを書いたときに、node_modulesではなく、グローバル変数のjQueryを呼んでくることが出来るようになります。

package.jsonにbrowserify-shimという項目を作ってこんな感じで指定すれば動作します。

debowerify

debowerifyは、bowerでインストールしたライブラリをrequireやimportできるようにするプラグインです。

最近オワコンと言われているbowerですが、jQueryプラグインなどをnpmでインストールして持ってくると、そこからnode_modules内のjqueryを取ってきてしまうと言う問題があります。shimの方の設定が悪いのかどうなのか解らないのですが、そんなわけでその手のものは仕方ないのでbowerで持ってきてrequire(import)します。

npmだけで管理はしたいのでどうにかしたいところです。最悪、jQueryプラグインも普通にscriptタグで読み込ませるコトもたまにやります。

 

まとめ

とりあえずこれで、ライブラリの多重インストールを避けつつインストールが出来ます。後はテーマ側で

とかやればとりあえずは終了です。

まぁ、WordPressのunderscore.jsとかBackbone.jsバージョンが古い問題とかもあるんですけどね。。。