Windows11にNode.js環境をつくるが複数バージョン同時起動できるようにしたい

この記事では Windows11にNode.js環境をつくっていきます。

複数バージョンの同居について

ここでのこだわりは、「複数バージョンインストールできること」と「異なるバージョンのプロジェクトを同時に起動できること」です。

プロジェクトが完成するとしばらく触らなくなります。
その間も、Node.jsのバージョンは進んでいきます。
自分自身はというと、その時の最新バージョンで別のプロジェクトを行っているかもしれません。

そして時は流れ・・・

忘れかけていた頃に機能追加の話しがでてきます。

えっと、たしかNode.jsのバージョンいくつだったっけ？

ってか、いま起動しているプロジェクトを止めたくないんだけど・・・

Node.js のバージョン違いのプロジェクトを同時に対応していくことになりました。

ここで確認しておきたいのが、「異なるバージョンのプロジェクトが同時に起動できるか」です。

「バージョン切り替えできます！」だけではダメなのです。
「nvm use 20.1.0 ですよ！」って言われても違うのです。

ということでこのあたりを重点的に確認しながら進めていきたいと思います。

事前情報として

事前情報として、ChatGPTさんに確認したところでは、VSCodeとnvm-windowsを使えば実現できるということです。

9割がた信用しておこうと思います。

もし残り１割、どうやっても期待通りにできなかったときは「できることが分かっている」下記の方法に切り替えます。

こちらは実際に環境を作って現役で稼働している方法です。

前提として

前提として、Node.js はVSCodeを使用して触っていくこととします。
VSCode以外を考えている場合は「Windows10にNode.js12.18.1をインストール」を参考にインストールすると良いです。

nvm-windowsをインストール

ダウンロード先
https://github.com/coreybutler/nvm-windows

Githubから取得します。

上記URLにアクセスしたら少し下にスクロースし、
下図、「Overview」の２行目にある「Download Now!」をクリックします。

下図、「nvm-setup.zip」をクリックしてダウンロード

下図、ダウンロードした「nvm-setup.zip」を解凍して出てきた「nvm-setup.exe」をダブルクリックしてインストールします。

確認

「WIN + R」 cmd Enter でコマンドプロンプトを開きます。

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

nvm list

No installations recognized.

インストール可能なバージョンを確認

nvm list available

https://nodejs.org/ja/
▲公式サイト

他のWEBサイトではこのあと「nvm install ・・・」や「nvm use ・・・」を行っているのを見ると思いますが、一旦ここでインストールは完了です。

本記事の目的は「複数バージョンを同時起動」です。

ここからは「複数バージョンを同時起動」について進めていきたいと思います。

VSCode で 22.1.0 を設定する

ここでは最新の 22.1.0 を入れることとします。
他のバージョンでもバージョン番号のところを変えるだけで基本的に同じです。

対象バージョンのインストール

nvm install 22.1.0

.nvmrc ファイルの作成

VSCodeのプロジェクトを作成していない場合は先に作っておいてください。
プロジェクトのルートディレクトリに置く形になります。

プロジェクトのルート/.nvmrc
というファイルを作成し中身を次のようにします。

22.1.0

バージョン番号 ＋ 改行のみのファイルです。

VSCode のターミナル設定

VSCode のターミナルが起動するたびに、.nvmrc ファイルを読み込み、そのバージョンの Node.js を自動で使用するように設定します。

プロジェクトのルート/.vscode/settings.json
こちらのファイルを編集します。なければ作成します。
次の内容にします。

{
    "terminal.integrated.profiles.windows": {
        "PowerShell": {
            "source": "PowerShell",
            "icon": "terminal-powershell",
            "args": [
                "-NoExit",
                "-Command",
                "& {if (Test-Path .nvmrc) { $version = Get-Content .nvmrc; nvm use $version } else { Write-Host 'No .nvmrc file found' }}"
            ]
        }
    },
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

VSCode のターミナルを開く

変更を反映させるためにVSCodeのターミナルを開き直します。

VSCodeの再起動では反映されないので注意です。

メニューから「ターミナル」＞「新しいターミナル」と選択します。

node -v

npm -v

ここまででひとまず「22.1.0」を指定したVSCode環境の完成です。

異なるバージョンのプロジェクトを同時起動

こちらについて検証したいのですが、ちょっと時間が取れないのと、自分自身が今すぐ確認したい状況ではないのでまた必要になったタイミングで検証したいと思います。

ここまででも、プロジェクトを切り替えるたびに、VSCodeを閉じて起動する分にはうまく機能すると思います。

気になっているのは、２つ３つのプロジェクトを同時に開きっぱなしにしておけるかどうかです。

ChatGPTさんは「できるよ！」と言っています
こちらについて結果がでればまた追記したいと思います。