Umi Uyuraのブログ

プログラミング関連の作業ログ

React + NW.js開発時のpackage.jsonを見直し

React NW.js node-webkit npm

先日、React + NW.jsのプロジェクトをnode-webkit-builderでパッケージングした際、プロジェクトローカルに開発用の依存パッケージとしてインストールしました。

umi-uyura.hatenablog.com

それ以前に入れていたツール類はグローバルにも入れてしまっていたので、きちんとpackage.jsonで依存関係がまとまっているように、いちど整理してみました。

関連パッケージの整理

React + NW.jsの環境で最低限必要なものは、以下の4つでした。

  • React
  • React-tools
  • NW.js
  • node-webkit-builder

です。

このうち、JSXをJavaScriptへ事前コンパイルするために使うReact-toolsと、配布形式にパッケージングするために使うnode-webkit-builderは開発時にしか使わないので、これらはpackage.jsonの devDependencies に記載します。

残りのReactとNW.jsは、実行時にも必要なものなので、 dependencies にすることにしました。

直接package.jsonを編集しても良かったのですが、いったんグローバルに入れたパッケージ群を npm uninstall -g でアンインストール。

その後、

$ npm install nw react --save
$ npm install react-tools node-webkit-builder --save-dev

で、インストールと合わせてpackage.jsonも更新するようにしました。

できあがったpackage.jsonを見ると、このような感じになっていました。

{
  ...
  "dependencies": {
    "nw": "^0.12.0-1",
    "react": "^0.13.1"
  },
  "devDependencies": {
    "node-webkit-builder": "^1.0.11",
    "react-tools": "^0.13.2"
  }
  ...
}

npm run ベースの実行コマンドの整理

package.jsonの scripts に設定をして、 npm run <command> で実行できるようにしてみました。

{
  ...
  "scripts": {
    "start": "nw",
    "build": "jsx ./src ./build --extension jsx",
    "watch": "jsx --watch ./src ./build --extension jsx",
    "package": "nwbuild -p osx64,win64 .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}
  • npm start ... NW.jsの実行
  • npm run build ... src フォルダ 以下の.jsxをコンパイルして build フォルダへ出力
  • npm run watch ... src フォルダ以下の.jsxを監視して、変更があったらコンパイルして build フォルダへ出力
  • npm run package ... node-webkit-builderでMac向けとWindows向けにパッケージング

npm test は本来テストの実行処理を書きますが、現状は npm init で作成したときの初期値のまま…

気になったこと

npm scriptsへはタスクを直接書かない

今回参考にしていた npm で依存もタスクも一元化する - Qiita によれば、 scripts にコマンド（タスク）を直接書くのはよろしくなく、GulpやGruntなどのタスクランナー系をかませて使うほうが、保守性の面から見てもよいらしい。

ただ、実は自分がWeb制作がメインでないこともあり、タスクランナー系をあまり積極的に使っていなかったため、現状は直接コマンドを書く形にしています。

Prefer Globalなパッケージへの依存

依存関係をpackage.jsonへまとめている際、React-toolsのインストールで以下のような警告が出ていたこと。

$ npm install react-tools node-webkit-builder --save-dev
...
npm WARN prefer global react-tools@0.13.2 should be installed with -g
...

どうやらReact-toolsはグローバルに入れることを推奨しているもよう。

しかし、グローバルに入れてしまうとpackage.jsonでの依存関係管理が成り立たなくなってしまう気もするので、このあたりはどう解決するのが良いか気になりました。

調べていて見つけたのは以下の記事で、そういったものについては、package.jsonの preinstall フィールドに npm install -g <hogehoge> などと記述して、インストールをさせてしまうというものでした。

gruntみたいなコマンド実行できるnodeのmoduleをpackage.jsonに書いた時のメモ - damelog

ただ、これについても 先のQiita記事 でも触れられていて、 npm run で実行する際にローカルのコマンドにパスが通ることを利用できるので、やはりグローバルを汚さず、ローカルで管理する方が良いらしい。

確かに、その方が自分としてもしっくり来たので、基本的にはローカルに入れるようにしてみようと思います。

参考