maesblog

npmで公開されているjQueryプラグインを使う with Browserify & parcelify

2月18日にnpmのブログに「The npm Blog — Welcome, jQuery developers!」という記事が投稿されました。

The jQuery Plugin Registryはすでに読み取り専用と化しているので、npmはjQueryコミュニティのサポートを開始するという内容でした。つまりnpmはjQueryプラグインの公開にも力を入れていくということです。

この記事に続いてjQueryプラグインの公開方法、使用方法、開発方法などの記事も続々と投稿されました。jQueryプラグインもまだまだ見捨てられていないということを信じて、今回はnpmで公開されているjQueryプラグインの使い方について紹介します。

さらにnpmのブログで2月25日に投稿された「The npm Blog — Using jQuery plugins with npm」という記事では、「npmでjQueryプラグインを使う方法」が紹介されていました。すごく参考になったので、今回はこの記事の内容をベースに書いていきます。

npmで公開されているjQueryプラグインの使い方は主に2通りあり、1つは今まで通りのscriptタグを使って、jQurey本体とjQueryプラグインをHTMLに読み込んだ上で、さらに別ファイルに処理を書いていくという方法となります。

ただこの方法だと、HTMLファイルに直接ファイルのパスを書き込んでいるため、npmを更新した際にディレクトリに変更があれば不具合が生じる可能性を秘めています。そこでオススメしたいのがこれから紹介する2つ目の方法です。こちらの方法ではBrowserifyとparcelifyというツールを使うことによって、モジュールを使用した開発を容易にし、コードの構造の改善やメンテナンスを楽にしてくれます。

それでは早速、Browserifyとparcelifyの環境の構築方法から説明していきます。

Browserifyとparcelifyの環境の構築

Browserifyの準備

Browserifyは、バックエンドとフロントエンドのnpmパッケージ（CommonJSモジュール）を一緒に使うのを容易にしてくれるコマンドラインツールです。そうした複数のJSファイルの依存関係を考慮した形でひとつのJSファイルにまとめてくれます。HTMLにはそのファイルだけを挿入するだけで済むようになります。もちろんnpmで公開されているモジュールにも対応しています。

browserify
Browserify

以下のコマンドでBrowserifyをインストールします。

$ npm install -g browserify

parcelifyの準備

parcelifyは、GitHubのページを翻訳すると「Browserifyの依存関係グラフに基づいてcssや他のバンドルをアウトプットするツール」となります。私も詳しくは理解していませんが、要はBrowserifyのCSS版ということでしょうか。CSSファイルのようなアセットを扱うためのベストプラクティスはまだないという中で、いま考えられる最も簡単な方法がこのparcelifyを使う方法だということです。

以下のコマンドでparcelifyをインストールします。

$ npm install -g parcelify

これらのツールはコマンドラインツールであり、プロジェクトをビルドする時に使用します。なのでプロジェクトに依存しないように、「-g」オプションをつけてグローバルにインストールしておく必要があります。

npm公開のjQueryプラグインを使う準備

説明していく上で、npmのブログの例でも使われている「tipso.js」というjQueryプラグインを使っていきます。ツールチップを実装するためのjQueryプラグインでnpmで公開されています。

demoディレクトリを作成し、その中に移動します。

$ mkdir demo
$ cd demo

package.jsonファイルを生成します。

$ npm init

生成したpackage.jsonファイルに以下を記述します。

{
  "name": "demo",
  "version": "1.0.0"
}

npmで公開されているjQueryプラグイン「tipso.js」をインストールします。（「–-saveオプション」をつけるとpackage.jsonファイルに依存関係を追加します。）

$ npm install --save tipso

demoディレクトリの中にHTMLファイルを作り、以下のように記述します。

<!DOCTYPE html>
<html>
<head>
  <title>npm and jQuery demo</title>
  <link rel="stylesheet" href="./bundle.css">
</head>
<body>
  <span class="title-tipso tipso_style" title="This is a loaded TIPSO!">Roll over to see the tip</span>

  <script src="./bundle.js"></script>
</body>
</html>

これからbundle.jsファイルと、bundle.cssファイルを作っていきます。

browserifyでJavaScriptをバンドルする

jQueryをプロジェクトディレクトリにインストールします。「–-save」オプションをつけることでpackage.jsonに追加されます。

$ npm install --save jquery

作業用のファイルとしてentry.jsファイルを作成します。

$ touch entry.js

作成したentry.jsを開き、以下のように記載します。

global.jQuery = require('jquery');
require('tipso');

jQuery(function () {
  jQuery('.title-tipso').tipso();
});

demoディレクトリにあるpackage.jsonの中の”browser”の値にtipso.jsファイルのパスを記載し、Browserifyにその場所を知らせます。（ただし、tipso.jsの方のpackage.jsonファイルの中の”main”の値にパスが記載されている場合は省略可です。）

"browser": {
  "tipso": "./node_modules/tipso/src/tipso.js"
}

以下のコマンドで、bundle.jsファイルが作成されます。（「–-debug」オプションをつけると、バンドルされたファイルにソースマップを追加してくれます。ブラウザのコンソールでデバッグしやすくなります。）

$ browserify entry.js --debug > bundle.js

以下のコマンドでも、bundle.jsファイルを作成することができます。

$ browserify entry.js -o bundle.js

jquery.jsファイルも、tipso.jsファイルも、entry.jsファイルもすべてbundle.jsファイルにまとめられているので、HTMLファイルにはbundle.jsファイルだけを挿入するだけで済みます。

<script src="./bundle.js"></script>

ここでは詳しく説明しませんが、bundle.jsファイルはけっこう重いファイルとなってしまいます。Browserify-shimというツールを使うことで、CDNのjQueryファイルをrequireして扱えるようになり、ファイルサイズを抑えることができるようになります。

追記（2015-09-07）: browserify-shimの使い方について記事を書きました。以下も参考にしてみてください。

  • browserify-shimを使って、CDN経由で外部JSライブラリをrequireする – maesblog

    • parcelifyでCSSをバンドルする

    CSSも同様にparcelifyでバンドルしていきます。

    demoディレクトリにあるpackage.jsonの中の”style”の値にtipso.cssファイルのパスを記載し、parcelifyにその場所を知らせます。（ただし、tipso.jsの方のpackage.jsonファイルの中の”style”の値にパスが記載されている場合は省略可です。）

    "style": [
  "./node_modules/tipso/src/tipso.css"
]

    以下のコマンドで、bundle.cssファイルが作成されます。

    $ parcelify entry.js -c bundle.css

    上記のbundle.jsファイルと同様に、使用する全てのCSSファイルがbundle.cssファイルにまとめられます。以下のようにbundle.cssファイルだけをHTMLファイルに挿入するだけで済みます。

    <link rel="stylesheet" href="bundle.css">

    デモ

    実際に上記の方法で、bundle.jsファイルと、bundle.cssファイルを作って、こちらのブログに読み込んでみました。以下の文字列にカーソルを乗せるか、文字列をクリックするとTooltipが表示されます。「tipso.js」が実装されているのがわかると思います。

    Roll over to see the tip

    「tipso.js」デモ

    まとめ

    以上のようにBrowserifyとparcelifyを使用することで、npmで公開されているjQueryプラグインを依存関係を考慮したモジュラーなJavaScriptの開発に取り込むことができるようになります。さらに、ファイルをひとつにまとめてくれるので、パフォーマンスの向上にも貢献してくれます。jQueryプラグインを使う時は、ぜひこうした開発方法を取り入れていきたいですね。ただし、ファイルはかなり重くなると思うので、ビルド時には圧縮することをおすすめします。

    次はjQueryプラグインをnpmに対応させる方法とnpmに公開する方法について紹介したいと思っています。それから、今回はnpmのブログ記事に倣ってBrowserifyとparcelifyという2つのツールを使いましたが、1つのツールだけで同じようなことができるwebpackを使った方法なども紹介したいと思います。

関連記事

コメント

  • 必須

コメント