npmにjQueryプラグインを登録する

このエントリーをはてなブックマークに追加

npmにプラグインを登録する

本エントリーは「to-R JavaScript Advent Calendar 2015」20日目のエントリー、今回はnpmにjQueryプラグインを登録する方法について解説をします。

npmとBrowserifyでjQueryプラグインを管理する」で解説したとおり、npmに登録しておけばユーザーがコマンドラインからインストールができるようになり使いやすくなります。
(同様のパッケージ管理としてbowerがありますが)

jquery.heightLine.jsをnpm登録したのでその内容をご紹介します。

プラグインのCommonJS化

jQueryプラグインの場合は以下の雛形の中でjQueryプラグインを定義します。

function (factory) {
  if(typeof module === "object" && typeof module.exports === "object") {
    factory(require("jquery"), window, document);
  } else {
    factory(jQuery, window, document);
  }
}(function($, window, document, undefined) {
  // ここにjQueryプラグインの内容を記述
}));

require()に対応している場合はrequire()でjQueryを読み込み対応していない場合はグローバルのjQueryオブジェクトに対して利用するという内容です。

package.jsonの作成

以下のコマンドでpackage.jsonを作成しましょう。

npm init

それぞれ、公開される情報なので慎重に記述してください。

「entry point」にはrequire()で読み込みたいライブラリの実ファイルまでのパスを記述します。

「keywords」には「jquery-plugin」と記述しておくと検索されやすくなります。

最後に依存関係をdependenciesに指定しておきましょう。

"dependencies": {
  "jquery": "^2.1.3"
}

この場合2.1.3と互換性を持ったjQueryもインストールされます。

jQueryの場合、1系統と2系統に分かれておりjQueryプラグイン作者が明示的にバージョンを指定するのはどうなんだろうと思いますが、ちょっとお作法が分からないのでままで。

npmアカウントの作成

npmアカウントがない場合は作成する必要があります。以下のコマンドで登録できます。

npm adduser

ここでUsername、Password、Emailなどの情報を登録します。Emailはnpm上に公開されてしまうので注意してください。

以下のコマンドでログインを行います。

npm login

以下のコマンドで公開できます。

npm publish

これだだけで、あっけないほど簡単に登録できます。

以下が公開されたnpmのURLです。

https://www.npmjs.com/package/heightline

jQueryプラグインを修正した場合は、package.jsonのバージョンを上げてnpm publishを再び実行すれば大丈夫です。

参考

jQueryプラグインのCommonJSモジュール化からnpmに公開するまでの方法 | mae's blog
npm package.json 日本語版 取扱説明書


関連エントリー

JavaScriptライブラリをbowerに登録する
npmとBrowserifyでjQueryを管理する

スポンサードリンク

«npmとBrowserifyでjQueryプラグインを管理する | メイン | 2015年のto-R人気エントリーTOP20»

このエントリーのトラックバックURL
コメントを投稿