すたらブログ

文系Webプログラマの備忘録

GitHubで公開中のjQueryプラグインをCDNで配信するためにjsDelivrへ登録した

GitHub

最終更新:

目次

利用する方法

例: jquery.add-input-area (GitHub, npm)

単体で
<!-- npmに存在するファイルを利用 -->
形式: https://cdn.jsdelivr.net/npm/<パッケージ名>@<バージョン>/<ファイル>
<script src="https://cdn.jsdelivr.net/npm/jquery.add-input-area@4.9.1/dist/jquery.add-input-area.min.js"></script>

<!-- GitHubに存在するファイルを利用 -->
形式: https://cdn.jsdelivr.net/gh/<ユーザー名>/<リポジトリ名>@<バージョン>/<ファイル>
<script src="https://cdn.jsdelivr.net/gh/sutara79/jquery.add-input-area@4.9.1/dist/jquery.add-input-area.min.js"></script>
jQueryと合わせてひとつのHTTPリクエストで
<!-- npm -->
<script src="ttps://cdn.jsdelivr.net/combine/npm/jquery@3.2/dist/jquery.min.js,npm/jquery.add-input-area@4.9/dist/jquery.add-input-area.min.js"></script>

<!-- GitHub -->
<script src="https://cdn.jsdelivr.net/combine/gh/jquery/jquery@3.2/dist/jquery.min.js,gh/sutara79/jquery.add-input-area@4.9/dist/jquery.add-input-area.min.js"></script>

(公式: ひとつのHTTPリクエストにまとめる方法)

登録する方法

2017年5月14日現在、登録はとても簡単になりました。
GitHubまたはnpmで公開しているものなら全てCDNとして利用できます。
ただし、以下のような条件があります。

  • セマンティックバージョニングに則ったバージョンをgit tagでつけること。
  • CDNとして提供したいファイルをpackage.jsonのmainで指定すること。
    mainのファイルがブラウザでは利用できない形式の場合は、代わりにbrowser、cdn、jsdelivrの項目で指定すること。
    (私が試した限りではどれも不要でした。後述)
  • min.js、min.cssなどの縮小ファイルを提供する場合はソースマップも含めること。
    (私が試した限りではソースマップは不要でした)
    縮小ファイルを提供していない場合は、jsDelivrが自動で生成する。

(公式: 登録方法)

バージョンタグを付ける

# タグを付ける
git tag v1.0.0

# タグをリモートに送信する
git push origin --tags

(参照: Git - タグ)

package.jsonでの指定は不要?

2017年5月14日現在では、mainやbrowser、cdn、jsdelivrで指定しなくても下記のように全てのファイルがCDNから入手できます。
ただ、今後仕様が変わるかもしれないので、きちんと指定したほうがいいと思います。

縮小ファイルを作成する

ミニファイする方法は色々ありますが、下記のウェブサービスが手軽に利用できます。

古い方法 (2017年5月14日現在)

jsdelivrをフォークする

Forkボタンを押すだけで完了です。

patch-1ブランチへ移動する

フォークしたリポジトリの「Branch:」をクリックして「patch-1」ブランチを選びます。

info.iniを作成する

patch-1ブランチでjsdelivr/files/<プロジェクト名>/info.iniのパスで作成します。
画面右側にある「Create new file」をクリックします。

パッケージ名の後に/(スラッシュ)を入力すれば、自動で階層化してくれます。

私のinfo.iniは以下のように書きました。

author = "Yuusaku Miyazaki"
github = "https://github.com/sutara79/jquery.add-input-area"
homepage = "https://sutara79.github.io/jquery.add-input-area/"
description = "jQuery plugin to add or delete Form elements."
mainfile = "jquery.add-input-area.min.js"

update.jsonを作成する

「info.ini」と同じ階層で作成します。
(patch-1ブランチのjsdelivr/files/<プロジェクト名>/update.json)

私のupdate.jsonは以下のように書きました。

{
  "packageManager": "github",
  "name": "jquery.add-input-area",
  "repo": "sutara79/jquery.add-input-area",
  "files": {
    "basePath": "dist/",
    "include": [
      "jquery.add-input-area.min.js"
    ]
  }
}

注意: includeのファイルはプロジェクトのルートからのパスで記述します。
ファイルが全て共通のサブディレクトリ内にあるなら、basePathを設定するのが便利です。

プルリクエストを送る

下記の画像の通りに進めていきます。

本家と比べて、どのファイルをプルリクエストすべきなのかを自動で選んでくれます。

プルリクエストは下記で確認できます。
設定ファイルに誤りがあれば赤い"✕"印で表示されます。

マージされるのを待つ

プルリクエストに問題がなければおよそ半日以内には自動でマージされ、notifications@github.comからメールが届きます。

これで完了です。
jsdelivr/files/jquery.add-input-area/には他にバージョン番号が名前となったフォルダがありますが、これはjsDelivrが自動で作成したものです。

うまくいかないときは

成功した場合はプルリクエストは「Update project jquery.add-input-area to v4.9.1」のようなタイトルでClosedの状態になっているはずです。

マージされずにプルリクエストがOpenのままということは、何かミスをしていると思います。
たとえば、私はきちんとminファイルを作ってコミットしたものの、それにタグを付け忘れていました。
jsDelivrが古いバージョンを登録しようとして、それにはminファイルが含まれていなかったのでエラーとなりました。
新たにタグを付けてそれをjsDelivrに報告したら、あちらの方が手動でマージしてくださったようです。
お手数かけました…orz