JavaScriptのライブラリ管理としてはBowerがよく使われてきましたが、最近ではnpmを使ってパッケージ管理することが増えています。数多くのライブラリがnpmにも対応しており、Node.jsがあればデフォルトでnpmが入ってくれるので使うのも容易です。
そこで今回はMonacaアプリ開発においてパッケージ管理をnpmで行う方法を紹介します。なお、利用に際してはMonaca Localkitを前提としています。また、Node.jsは予めインストールされていることとします。
LocalKitでプロジェクトを作成する
まず最初にMonaca LocalKitを使ってプロジェクトを作成します。今回はHello World Appを使っています。作成するとこのようなファイル構成になっているかと思います。
jQueryを使ってみる
今回は試しとしてjQueryをインストールしてみましょう。最初にMonacaアプリのルートディレクトリでnpm initを実行します。
npm init
色々聞かれますが、ウィザード方式に沿って進めていってください。ではjQueryをインストールします。
npm install jquery --save
インストールが終わったら、JavaScriptを作成します。 www/src/hello.js とします。
var $ = require('jquery');
var onDeviceReady = function() {1
console.log($);
console.log("Hello World");
}
event = (typeof cordova == 'undefined') ? 'DOMContentLoaded' : 'deviceready';
document.addEventListener(event, onDeviceReady, false);
ここで注意が必要なのは、require('jquery')となっている点です。もちろん、通常のJavaScriptのままではこれは実行できません。
Browserifyを使う
そこでパッケージの解決に使うのがBrowserifyです。こちらもnpmを使ってインストールします。
npm install -g browserify
これで準備できました。先ほど作成したJavaScriptを指定してコマンドを実行します。
browserify www/src/hello.js -o www/js/app.js
このように実行すると、www/js/app.jsというファイルが生成されます。このファイルは先ほどのrequireを解決した状態になっています。
実行してみる
ではこのapp.jsをHTMLから読み込んで、Monaca Localkitでプレビューを実行してみましょう。
<script src="js/app.js"></script>
プレビューを開いた時、以下の画像のようにjQueryオブジェクトが表示されるはずです。ちゃんとライブラリが読み込めているのが分かります。
今はBowerも使えますが、npmでパッケージを提供し、Node.jsとブラウザ両方で動作するライブラリも増えています。BowerはMonaca IDEでも使えますが、npmは使えません。もしnpmを使いたい場合はMonaca Localkitを使ってみてください。