Monacaアプリのライブラリをnpmで管理しよう

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を使ってみてください。

 

Monaca Localkit – ローカル型HTML5ハイブリッドアプリ開発ツール