【fnm】 Node.jsのバージョンをスマートに切り替えたい

背景

メインで作業しているプロジェクトではwebpackをv14系のNode.jsを使用しており、最新の18系に上げるとスクリプトが動かない不具合¹があるので長らく14系を使用していました。
しかし、Viteを使う別プロジェクトを作成したところコンパイルが通らないので調べると、Vite3以降はNode.jsのバージョンが16以上でないといけないようなので²、fnmを使って複数バージョンを切り替えられるようにしました。

fnmは最初のセットアップが大変ですが、それを終えた後にはきっと優雅なfnmライフが待っていることでしょう。

※自環境がWindowsのため、Mac等での導入方法は解説してません。

ツールの選定

初めはNodistを使おうとしましたが、Node.jsのバージョンを切り替えるにはいちいちコマンドを打つ必要があり、スマートじゃない。

そこで、fnmはディレクトリ内の.node-versionファイルを参照してバージョンを自動的に切り替えてくれるらしく、そちらに変えました。

インストール

バイナリファイルの入手

公式のリポジトリからそれぞれの環境にあったzipをダウンロード

windowsであれば、「fnm-windows.zip」

これを解凍して、PATHを通します。

私は以下の場所に置きました。
C:\Users\<user-name>\fnm

これだけでfnmコマンドが使えるようになります。

fnm --version
# > 1.33.1

とっても簡単ですね。(この後がめんどくさいです)

シェルセットアップ

fnmを使い始めるには、環境変数の設定が必要です。

PowershellのProfile作成($Profileが無い場合)

path-test $Profile

上のコマンドをPowerShellで実行してFalseが出れば、まだprofileファイルが無いので、以下のコマンドで作成

	new-item -path $profile -type file -force

$Profileに追記

$profile

で表示されるプロファイルファイルに以下を追記

fnm env --use-on-cd | Out-String | Invoke-Expression

これでPowerShellが起動する際にこのスクリプトが実行されてfnm用の環境変数が用意されます。

(まだ終わりじゃない)

スクリプトの実行を許可

PowerShellを再起動すると、このようなエラーが出ると思います。
上で作成したプロファイルファイルの実行に失敗しています。

Set-ExecutionPolicyコマンドでポリシーにUnrestrictedを設定すればいいのですが、それでは常時スクリプトの実行が許可されてしまいセキュリティ的にも不安なので、起動コマンドに-ExecutionPolicy Unrestrictedを追加。

この場合、ScoepeオプションはProcessになるので、PowerShellを閉じればDefaultに戻るので安心です。

これで、スタートメニューから起動した際に、エラーが出ずにプロファイルファイルが実行されます。

VSCodeからPowerShellを使う場合

VSCodeのTerminalで起動するPowerShellは別途setting.jsonにポリシーを記述する必要があります。
terminal.integrated.profiles.windows のPowerShellの部分を以下の通りに変更

"PowerShell": {
    "source": "PowerShell",
    "icon": "terminal-powershell",
    "args": [
        "-ExecutionPolicy",
        "Unrestricted"
    ]
},

fnmの操作

Node.jsのインストール

既にNode.jsがインストールされている場合は、そのバージョンがデフォルトのバージョンになります。
バージョンをインストールするには

fnm install 18
# v18系がインストールされる

インストール済みのバージョンの確認

fnm list

Node.jsのバージョン切り替え

fnm use 18

インストールされていないバージョンを指定すると、インストールするかどうか聞かれます。

使用しているバージョンの確認

fnm current

ディレクトリ毎にバージョンを設定

ディレクトリ内にバージョンファイル(.node-version もしくは.nvmrc)を作成しバージョンを記述することで、それより下層のディレクトリでのバージョンを指定することができます。

これで、ディレクトリを移動するだけでバージョンが切り替わるようになりました！

.gitignoreに設定

git管理されているディレクトリでは、このバージョンファイルを無視して欲しいので、グローバルな.gitignoreに登録します。

git config --global core.excludesFile

このコマンドで出力されるパスに.gitignoreがあるので、そこに.node-versionを追記。

ディレクトリ移動でバージョン切り替え

以下のようにディレクトリaaaとディレクトリbbbを用意し、
aaaには14.21.3を指定した.node-versionを
bbbには18.15.0を指定した.node-versionを用意します。

 aaa
├ .node-verion # 14.21.3
└ bbb
  └ .node-verion # 18.15.0

bbbからaaaに移動するだけで、以下のようにバージョンが切り替わりました！

おしまい

参考記事

https://github.com/Schniz/fnm/blob/master/README.md
https://umi-uyura.hatenablog.com/entry/2021/09/30/083419
https://www.curict.com/item/d1/d1c4a3e.html

1. https://qiita.com/kamada_math/items/4df6f153bb2d0159a4ff ↩

2. https://www.flying-h.co.jp/media/2022/09/30/error_node_path/ ↩