npmとBrowserifyで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プラグインを管理する»