isomorphicなJavaScriptプロジェクトのパッケージ管理

Node.jsでフロントエンドもバックエンドもJSのプロジェクトをはじめる際に、
それぞれのパッケージ管理をどのようにするか悩んだ記録。

要件としては、

• 1.フロントエンドもrequireでmoduleの探索をしたい
• 2.フロントエンドとバックエンドでパッケージ管理を分けたい

1を満たすためにcomponent.jsかbrowserifyか悩んだ。
browserifyは作りが怖かったが、component.jsはもっと怖かった。

browserifyを単純に使うとnode_modulesを共有してしまうので、
2が満たせない。debowerifyというpluginがあるようなので、
フロントエンドはbower_components/にという方針でやってみた。

// バックエンドの依存管理
package.json
// バックエンドのパッケージ置き場
node_module/* 
// バックエンドのアプリケーションコード
lib/*.js

// フロントエンドの依存管理
bower.json
// フロントエンドのパッケージ置き場
bower_component/*
// フロントエンドのアプリケーションコード
frontend/js/*.js

gulpfile.js  // browserifyとdebowerify
// 結合後のjsやcss
public/

ところがこれだと、node_moduleもbower_componentも同じモジュールがあったときに、
node_moduleのほうをbrowserifyが優先してしまい、コードを見てもオプションがなさそうだった。

また、gulpで必要なモジュールをpackage.jsonに書き続けないと行けないのもつらい。

結局、次のようにフロントエンドとバックエンドで異なるリポジトリという意識に近い構成にした。

// バックエンドの依存管理
package.json
// バックエンドのパッケージ置き場
node_module/* 
// バックエンドのアプリケーションコード
lib/*.js

// フロントエンドのもろもろをやるところ
frontend/
    - package.json
    - bower.json
    - node_module/
    - bower_component/
    - gulpfile.js
    - public/

npm scriptsのpostinstallなどでfrontendにcdして、bower install && npm install
したりすることで環境構築すればいいかなと。

gulpは、cwdを外から差し込めないタイプのモジュールが多すぎて、どうせ、フロントエンドでしかつかわないから
そちらに置くことにした。

isomorphicなとかいいながら、共有コードについて触れていないのは、
やってみて必要になったら、考えるという形でいくつもり。