ナガモト の blog

Full Cycle Developerを目指すエンジニアが有用そうな技術記事や、ポエムのようなよしなしごとを投稿するブログです。

Node.jsを用いた開発環境におけるパッケージアップデート不全の調査

最近Node.jsを用いるローカルの開発環境を整えていました。そのときにパッケージがアップデートできない問題に遭遇し少々ハマりました。そのため、未来の自分のためにも備忘録的に対応の手順を書き残しておきます。

環境

※fish・fisherman導入についてはQiitaに投稿しています。

アップデート不全発生

npm install -g @angular/cliでアップデートしても利用する@angular/cliのバージョンが変わらない(ng versionの結果が変わらない)

調査

アップデート自体は正常終了しているため、呼び出している@angular/cliとアップデートしている@angular/cliとが別のものである可能性があります。それを調査します。

コマンド:npm install --save-dev @angular/cli

カレントディレクトリで開発用にインストールした場合に最新バージョンがインストールされ、利用可能になるか試しました。インストールは正常終了し、最新バージョンが利用可能になりました。これにより、ローカルインストール*1では問題ないことが判明しました。

> npm install --save-dev @angular/cli
~中略~
[fsevents] Success: "/Users/ユーザ名/.config/fnm/lib/node_modules/@angular/cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
+ @angular/cli@7.3.3
added 363 packages from 196 contributors in 26.312s

> ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.3.3
Node: 10.15.1
OS: darwin x64
Angular:
...

コマンド:npm uninstall -g @angular/cli & npm install -g @angular/cli

前述のローカルインストールを操作したディレクトリとは異なるディレクトリで、@angular/cliを再インストールしました。アンインストールとインストールは正常に完了しました。

>npm uninstall -g @angular/cli
removed 363 packages in 5.499s

>npm install -g @angular/cli
/Users/ユーザ名/.config/fnm/bin/ng -> /Users/ユーザ名/.config/fnm/lib/node_modules/@angular/cli/bin/ngatus

> fsevents@1.2.7 install /Users/ユーザ名/.config/fnm/lib/node_modules/@angular/cli/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/ユーザ名/.config/fnm/lib/node_modules/@angular/cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
+ @angular/cli@7.3.3
added 363 packages from 196 contributors in 21.983s

ログのインストール先のディレクトリを見るに、fnmを介してインストールしていそうです。

コマンド:which ng

このコマンドにより、ngがどこを参照しているか確認できる。実際の結果は次のとおり。

> which ng
/usr/local/bin/ng

バージョンマネージャのfnmを介していないように見えます。/usr/local/bin/ngを閲覧することで、さらに詳細にどこのコマンドを呼び出しているか確認できます。(当記事では割愛)

コマンド:which xx

特に問題が発生していない他のnpm管理下のパッケージを確認することで、本来どこを参照しているのか確認します。*2

> which xx
/Users/ユーザ名/.config/fnm/bin/xx

fnmを介してアクセスする場合は、パスからfnmを介していることが明らかにわかるようです。

調査結果より

「ローカルインストールでない@angular/cliにアクセスする際のngコマンドは、参照先を誤っている」と言えそうです。

この結果から、そもそものグローバルな環境にNode.jsや利用するパッケージが存在する。そして、ngコマンドの際にはそちらを参照しているのではないか?と推測できました。実際に他のパッケージでもグローバルな環境に存在するもの*3はngと同様にアップデート不全が発生していました。

対策

一度グローバルなNode.js環境とfnmによるNode.js環境の両方をクリーンアップしてfnmを導入し直すことにしました。*4

※クリーンアップとfnmの再導入については別記事で公開予定です。

最後に

バージョン管理ツールを導入するときは既存のものをちゃんとアンインストールしてからにしましょう。もし、バージョン管理ツールが面倒ならdockerで環境構築しましょう。

ngmt83.hatenablog.com

*1:任意のディレクトリのみでpackage.jsonに指定したパッケージをインストールする方法

*2:fnmのドキュメントや実装を確認する方がより確実です

*3:ls /usr/local/lib/node_modules/ で確認可能

*4:PATHを通し直すなど、Node.jsで利用するパッケージの参照先を変更もできたが煩雑だったためやめました