React + NW.jsのプロジェクトをnode-webkit-builderで配布形式にパッケージングしてみた

先週から作っていた社内向けツールがなんとなく動いたので、Windows環境でも動くかどうかを確認するために、パッケージングすることにしました。

node-webkitのパッケージングは何度かやったことがありましたが、手動でやると若干面倒くさいので、今回は以前見かけていた node-webkit-builder というパッケージングツールを使ってみたので、そのメモです。

環境

パッケージ	バージョン
NW.js	0.12.0-1
React	0.13.1
React-tools (jsx)	0.13.1
node-webkit-builder	1.0.11

導入

npmから。

$ npm install node-webkit-builder --save-dev

グローバルにインストールすることもできますが、こちら（ npm で依存もタスクも一元化する - Qiita ）の記事などを読むと、依存関係はpackage.jsonで管理するのが良さそうということだったので、ローカルにインストールすることにしました。

パッケージング

ひとまず nw コマンドでは動いているものができたので、それをパッケージングしました。

ローカルにインストールしたコマンドは node_modules/.bin にインストールされ、そのパスは $(npm bin) で取得できるとのことなので、以下のようにして実行します。

$ $(npm bin)/nwbuild --platforms osx64,win64 .

--platforms でMacとWindows（どちらも64bit版向け）を指定して実行したところ、 build/<package name> フォルダが作成され、その中に出力されていました。

<project root>
  └ build
      └ <package name>
           ├─ osx64
           │    └─<package name>.app
           └─ win64
                 └─<package name>.exe

Macの場合は osx64/<package name>.app がアプリパッケージになっているので、これを配布して実行すればOK。

Windows向けには win64/<package name>.exe が実行ファイルですが、DLLなどが必要なため、 win64 フォルダごと配布しました。これをWindowsを使っている人に渡して、exeを実行してもらったところ、問題なく動作しました。

Mac上でもWindows向けのパッケージまで作れるのは便利ですね。 実際には、OSに依存するようなNodeモジュールを使うような場合は、きちんとWindows上でパッケージングする方が良いかもしれません。

パッケージ化した際に発生した問題

パッケージングしたものを動かした際に、ひとつだけ修正したのは、 require で読み込むパスの調整でした。

自作のモジュールを <project root>/lib に置いて、

var hoge = require('lib/hoge');

というように読み込んでいたのですが、パッケージングしたアプリを動かした際に、この部分が動きませんでした。

確かに、あるフォルダの中で実行している場合と、アプリにパッケージングされた状態では、パスの環境が変わっていると思われたので、

var hoge = require('./lib/hoge');

としたところ、動くようになりました。

参考

• mllrsohn/node-webkit-builder
• npm で依存もタスクも一元化する - Qiita

実践Node.js プログラミング (Programmer's SELECTION)