npmとBrowserifyでjQueryを管理する

npmのjQueryを利用する

本エントリーは「to-R JavaScript Advent Calendar 2015」18日目のエントリー、これまではJavaScriptライブラリの管理にはbowerなどが使われていましたが、最近ではnpmを利用することが多いようなのでnpmを利用した管理方法についてjQueryを利用して解説を行います。

まずはnpm init

すでに開発環境としてnpmを利用している場合は不要ですが、まずは開発ディレクトリでnpm initと入力してpackage.jsonを作成します。

npm init

色々聞かれますがGitHbuなどで公開しないのであれば基本Enterで問題ありません。

まずは雛形を用意

確認用の雛形を用意しましょう。

package.jsonと並列にindex.htmlとbundleディレクトリ、destディレクトリをそれぞれ用意します。

.
├── bundle
├── dest
├── index.html
└── package.json

index.htmlの内容は以下のようにしておきましょう。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="./bundle/script.js"></script>
</body>
</html>

jQueryのインストール

つぎにjQueryのインストール。以下のコマンドでjQueryのインストールができます。

npm install jquery --save

そうするとnode_modules/ jqueryが追加され、

.
├── bundle
├── dest
├── index.html
├── node_modules
│   └── jquery
│   ├── ....
└── package.json

--saveオプションをつけていますのでpackage.jsonに以下の内容が追記されます。

  "dependencies": {
    "jquery": "^2.1.4"
  }

開発用のスクリプトを作成

確認用のスクリプト dest/script.jsを作成しましょう。

var $ = require('jquery');
 
$(function () {
  alert("ok")
});

このままではまだ利用ができず、npmのjQueryはBrowserifyを利用してbundle/script.jsに変換しないと利用できません。

Browserifyのインストールと実行

npmのjQueryを利用するにはBrowserifyを利用するのが最も簡単なので以下のコマンドでインストールしましょう。Browserifyは-gオプションをつけてグローバルにインストールする必要があります。

npm install -g browserify

Browserifyを利用して dest/script.jsをbundle/script.jsにコンパイルしましょう。

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

bundle/script.jsはjQueryが利用できる形でdest/script.jsを読み込んでいますので、ブラウザでindex.htmlを確認すればalertが表示されます。

jQueryのバージョンを変更

今回インストールされたjQueryは2.1.4だったので、これを1.11.3に変更しましょう。
以下のコマンドでpackage.jsonで管理しているjQueryのバージョンを変更して、

npm install jquery@1.11.3 --save

コンパイルし直すだけで利用しているjQueryのバージョンを切り替える事ができます。

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

このようにnpmとBrowserifyを利用するればコマンドラインからJavaScriptライブラリのインストールやバージョン管理が可能になります。

次回はnpmとBrowserifyでjQueryプラグインを管理する方法について解説を行います。

スポンサードリンク

«jQuery samples - Ajax時にローディングを表示 | メイン | npmとBrowserifyでjQueryプラグインを管理する»