Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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なとかいいながら、共有コードについて触れていないのは、
やってみて必要になったら、考えるという形でいくつもり。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away