npmとBrowserifyでjQueryプラグインを管理する

npmとBrowserifyでjQueryプラグインを管理する

本エントリーは「to-R JavaScript Advent Calendar 2015」19日目のエントリー、前回はnpmでjQueryを管理するところまで実行しましたので今回はjQueryプラグインを管理してみます。

今回はわたしの開発しているjQuery.heightLine.jsを読み込み実行してみます。

まずは以下のコマンドでjQuery.heightLine.jsのインストールを行います。

npm install heightline -save

そうするとnode_modulesディレクトリ内に heightlineディレクトリが作成され

├── node_modules
│   ├── heightline
│   │   ├──....
│   └── jquery
│   ├── ....

package.jsonにheightlineが追加されたと思います。

  "dependencies": {
    "heightline": "^1.0.0",
    "jquery": "^1.11.3"
  }

確認用のHTMLを用意

確認用に以下のHTMLを用意しておきましょう。jQuery.heightLine.jsが実行されればこれらのdivの高さが揃えられます。

<style>
div{
	width:23%;
	float:left;
	margin-right:1%;
	border: 1px solid red;
	margin-bottom: 10px;
}
</style>
<div>あああああ</div>
<div>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
<div>ああああああああああ</div>
<div>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>

スクリプトは以下のように改修します。

global.jQuery =require('jquery');
require('heightline');
 
jQuery(function () {
  jQuery("div").heightLine();
});

npmとBrowserifyでjQueryプラグインを利用する場合は、globalにjQueryという名前空間を置きそれを起点にプラグインを実行します。

これをBrowserifyでコンパイルすればjQueryプラグインが利用できるようになります。

browserify dest/script.js -o bundle/script.js

スポンサードリンク

«npmとBrowserifyでjQueryを管理する | メイン | npmにjQueryプラグインを登録する»