12
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

bowerやrails-assetsの代替としてjsdelivrを使う

ここ数日、rails-assetsは終わったとかいやいやbowerはまだ終わってないと騒がしいですが、そんな中、最近自分もbowerを最近捨てていたので1そのあたりの話。

どんな環境か?

  • プロダクト全体ではまだbrowserifyなどは使えてない
    • 使いたいけどなかなかそこまで手が回らず・・・
    • browserifyとか使っているのであればbowerからの移行先は基本npmで良いだろう
  • bowerはChart.jsとかちょっとしたライブラリを持ってくるのに使っていた。
  • bower -> gulpでconcatして出力して管理していた。

このぐらいな環境であれば、jsdelivrはそれなりにおすすめできる。

結果:CDNで対応しよう

ある程度有名なライブラリばかりだったので、CDNで対応するのが楽そうだった。

CDNは色々あるが、jsdelivrを選定した。選定理由はこんな感じ

  • ライブラリ数が十分に豊富
    • cdnjsより豊富な気がする(調べてないので体感)
    • jquery.sticky-kitとかはjsdelivrにしかなかった。
  • 複数のファイルの同時呼び出しに対応 (重要)
  • 複数のCDNでBalanicingしているらしい
    • これに関してはそこまでがっつり読み込んでない。

個人的には刺さったのが二番目。

例えばjQueryとjQuery UIを取りたいなら

https://cdn.jsdelivr.net/g/jquery@1.11.3,jquery.ui@1.11.4

こんな具合。
形式としては

https://cdn.jsdelivr.net/g/パッケージ名(@version),パッケージ名...

という感じ。もっと細かい指定やカスタム指定はjsdeliverのgithubページで見てもらうと良い。

すごく構造化されているので、例えばサーバーサイドでこのURLを構築するのもざっくりこんな具合にさっくりできる。


def generate_jsdelivr_url(pkgs)
    path = pkgs.map{ |pkg_name, v| "#{pkg_name}@#{v}" }.join(",")
    "https://cdn.jsdelivr.net/g/#{path}"
end

pkgs = {
    "jquery": "1.11.3",
    "jquery.ui": "1.11.4"
}

generate_jsdelivr_url(pkgs)
// => "https://cdn.jsdelivr.net/g/jquery@1.11.3,jquery.ui@1.11.4"

もしCDNでなく自前のサーバーから配信したいなどがあれば、上記のURLをwgetでもすればよいのではなかろうかと思う(良いかはわからんけど、bower捨てる手法としては使えそう)。

番外編:jsdelivrに登録されてないライブラリどうするか?

順当にいけばCONTRIBUTEするのが一番。
とはいえ登録は多少面倒なところ2

これに対して便利なのはnpmcdn
npmに上がっているものは全て使えるので嬉しい。
ただ企業が運用しているしっかりとしたようなものでもないので、
polyfillなどのさほど重要でもないもの利用に留めている。
jsdelivrも自動でnpm配信やってほしい・・・


  1. 今回の騒動ありきというわけでもなく「なんか最近globalインストールした場合とそうでない場合で結果が変わる」みたいな問題があったから。何かの兆候だった気もする。 

  2. しかも面倒な割に数日前に一回pull requestを投げてみたけどなかなか音沙汰が無い・・・ 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
12
Help us understand the problem. What are the problem?