アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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ハイブリッドアプリ開発ツール