メモ

サブフォルダにある package.json で npm install したいときの prefix オプションを実験してうまくいったメモ

Posted on by seigo

サブフォルダにある package.json で npm install したいときの prefix オプションを実験してうまくいったメモです。

やりたいこと

Heroku 用に Node-RED をプロジェクトフォルダ配下で Node-RED エディタ画面でノードの追加インストールも動くようにするメモ

こちらで、プロジェクトフォルダの直下の階層に package.json を集めて対応したのですが、Node-RED + Svelte や Node-RED + Vue CLI +Vue 3 のようなフロントエンドの構造は子フォルダへ集約できるのに、バックエンドである Node-RED が子フォルダへ集約できないのって何とかしたいなあと思ったのがきっかけです。

ようやく調べたいワードが定まり先に進んでいる方々の知見に行きつきまして、 prefix オプションをつければよいことが分かりました。

ただ、npm で prefix オプションがついたり install あとにフォルダを指定する npm --prefix ./sub_project install ./sub_projectの挙動がイマイチピンと来ておらず実験してみます。

今回求めているのは「プロジェクトフォルダ直下からサブフォルダ内の package.json を元にサブフォルダでインストールが行う」という動作です。

プロジェクトを作る

image

まず適当なプロジェクトフォルダを作ります。

mkdir sub_project

sub_project というフォルダを作ります。

cd sub_project

フォルダを移動し、

npm init -y

package.json を作ります。

image

このようなフォルダ構造になりました。

試しに Milligram を加えてみる

適当なパッケージということでサッと入りそうな Milligram パッケージを加えてみた package.json がこちらです。

{
  "name": "sub_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "milligram": "^1.4.1"
  }
}

これは npm i でインストールしたものではなくて、手入力で入れたものです。つまりまだ、 node_modules フォルダはありません。あとは npm i を行えばインストールされるわけですね。

準備完了。

実行してみる

npm --prefix ./sub_project install ./sub_project

これをプロジェクトフォルダ直下で実行してみます。

image

おお、無事 sub_project フォルダ内で node_modules フォルダが登場してインストールされました。これは「プロジェクトフォルダ直下からサブフォルダ内の package.json を元にサブフォルダでインストールが行う」ってやつですね。

参考文献からも CI のような仕組みや自動化などを想定して使い方が書かれていて、わたしも別フォルダ npm i 的なものは求めていてフロントエンド用のフォルダだけ何かしたいといった、色々な用途に応用できそうで楽しみです！

、
seigo