かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その94 )( Node.js を 12.16.3 → 14.18.0 へバージョンアップする )

概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その93 )( WebDriver を最新バージョンに上げる ) の続きです。

  • 今回の手順で確認できるのは以下の内容です。
    • Node.js を 12.16.3 → 14.18.0 へバージョンアップします。npm は 6.14.5 のままです(npm 7 系は Node.js の 16.x から対応のようなので)。
    • これまで Node.js のバージョン管理ツールとして nodist を使用していましたが 30 Mar 2019 にリリースされた 0.9.1 でバージョンが止まっており、Node.js の 14.x 系へのバージョンアップもスムーズに出来ないようなのと、nvm-windows の 1.1.8 が2週間程前にちょうどリリースされたので、nvm-windows に切り替えることにします。
    • npm でインストールしているモジュールを一部を除き最新のバージョンにします。

参照したサイト・書籍

  1. 2020 年ではもう使えない Nodist はアンインストールする (Windows)
    https://zenn.dev/ymasaoka/articles/note-uninstall-nodish-windows

  2. coreybutler / nvm-windows
    https://github.com/coreybutler/nvm-windows

  3. node-gradle / gradle-node-plugin
    https://github.com/node-gradle/gradle-node-plugin

  4. Node.jsの新LTS版となる「Node.js 16」正式リリース。Apple M1チップ対応、JavaScriptエンジン「V8 9.0」搭載など新機能
    https://www.publickey1.jp/blog/21/nodejsltsnodejs_16apple_m1javascriptv8_90.html

    • Node.js は 16.x 系がリリースされていたはずと思っていたら、アクティブな LTS になるのはリリースから6ヶ月後の 10月下旬からでした。npm 7対応も 16.x からのようです。

目次

  1. まずは現在の状況を確認する
  2. nodist をアンインストールする
  3. nvm-windows をインストールして Node.js を 12.16.3 → 14.18.0 へバージョンアップする
  4. モジュールを最新のバージョンにする
  5. Gradle の npm-script 実行用のプラグインを com.moowork.node:1.3.1com.github.node-gradle.node:3.1.1 に変更する

手順

まずは現在の状況を確認する

現在のバージョンは nodist が 0.9.1、Node.js が 12.16.3、npm が 6.14.5 です。

f:id:ksby:20210930105814p:plain

https://nodejs.org/ja/ を見ると Node.js の推奨版は 14.18.0 LTS です。

f:id:ksby:20210930235949p:plain

nodist をアンインストールする

2020 年ではもう使えない Nodist はアンインストールする (Windows) の記事を見つけたので、ここに記載されている手順でアンインストールします。

コントロールパネルの「プログラムと機能」の画面を開き、nodist を選択してコンテキストメニューを表示してから「アンインストールと変更」を選択します。

f:id:ksby:20210930224041p:plain

D:\Nodist にインストールしていましたが、アンインストール後もこのディレクトリが残っているので削除します。

C:\Users\<ユーザ名>\.npmrc のファイルを削除します。

C:\Users\root\AppData\Roaming\npm-cacheディレクトリを削除します。

コマンドプロンプトで実行を試みると、nodist、Node.js、npm の全てが実行できなくなっていることが確認できました。

f:id:ksby:20210930225014p:plain

nvm-windows をインストールして Node.js を 12.16.3 → 14.18.0 へバージョンアップする

https://github.com/coreybutler/nvm-windows/releases の「1.1.8 - Corepack」から nvm-setup.zip をダウンロードします。

ダウンロードしたファイルを解凍すると nvm-setup.exe が生成されるので実行します。

  1. 「Setup - NVM for Windows」画面が表示されるので、「I accept the agreement」を選択後「Next」ボタンをクリックします。
  2. 「Select Destination Location」画面が表示されるので、インストール先を D:\nvm に変更後「Next」ボタンをクリックします。
  3. 「Set Node.js Symlink」画面が表示されるので、D:\nodejs に変更後「Next」ボタンをクリックします。
  4. 「Ready to install」画面が表示されるので、「Install」ボタンをクリックします。
  5. 「Completing the NVM for Windows Setup Wizard」画面が表示されるので、「Finish」ボタンをクリックします。

インストール後に環境変数を確認すると NVM_HOME、NVM_SYMLINK の2つが追加されて、この2つの環境変数を参照するよう PATH に追加されていました。

1.1.8 で nvm install lts というコマンドが追加されており、実行すると自動で現在の LTS である 14.18.0 がインストールされます。素晴らしい!

f:id:ksby:20210930234559p:plain

nvm use 14.18.0 コマンドを実行するよう書かれているので実行します。。。が、エラーになる上に SJIS文字コードだとエラーメッセージが文字化けして読めません。

f:id:ksby:20210930234739p:plain

nvm use 14.18.0 > nvm.log でファイルに出力してから IntelliJ IDEA で確認してみると、exit status 1: この操作を実行するための十分な特権がありません。 というエラーメッセージでした。

コマンドプロンプトを「管理者として実行」で起動してから nvm use 14.18.0 コマンドを実行すると、正常に実行されました。

f:id:ksby:20210930235136p:plain

管理者として実行していないコマンドプロンプトに戻ってバージョンを確認すると、nvm が 1.1.8、Node.js が 14.18.0、npm が 6.14.5 になっていました。

f:id:ksby:20210930235635p:plain

モジュールを最新のバージョンにする

バージョンアップ可能なモジュールを確認します。IntelliJ IDEA のメインメニューから「File」-「Settings...」を選択して「Settings」ダイアログを開き、画面左側で「Language & Frameworks」-「Node.js and NPM」を選択します。。。が、node、npm を認識していませんでした。後から気づきましたが、nvm use 14.18.0 コマンド実行後に IntelliJ IDEA を再起動し忘れているのが原因なので、手動で追加して認識させる必要はありませんでした。。。

f:id:ksby:20211001000613p:plain

手動で追加して認識させることにします。「Node interpreter」の右にある「...」ボタンをクリックします。

f:id:ksby:20211001001424p:plain

「Node interpreters」ダイアログが表示されるので、画面左上の「+」ボタンをクリックした後ドロップダウンメニューから「Add Local...」を選択します。

f:id:ksby:20211001001805p:plain

「Select Path」ダイアログが表示されるので、D:\nodejs\node.exe を選択して「OK」ボタンをクリックします。

f:id:ksby:20211001001843p:plain

D:\Nodist\... のパスが登録されていますが邪魔なので選択して「-」ボタンをクリックして削除します。

f:id:ksby:20211001002019p:plain

削除後「OK」ボタンをクリックしてダイアログを閉じて「Settings」ダイアログに戻ると、今度は画面右側にモジュールの一覧と現行バージョン、最新バージョン一覧が表示されました。

f:id:ksby:20211001002631p:plain f:id:ksby:20211001002736p:plain

今回は以下の方針でバージョンアップします。

  • admin-lte、bootstrap、ionicons は現行のまま。
  • mobx、mobx-utils は少し触ってみただけなのでバージョンアップしない。
  • eslint、jest、autoprefixer + cssnano + postcss-cli、prettier、stylelint + stylelint-config-standard、webpack + webpack-cli は別に章を分けてバージョンアップする。
  • バージョンアップは npm update ではなく npm install --save-dev autoprefixer@8.0.0(package.json の dependencies に記載されているものは --save、devDependencies に記載されているものは --save-dev にする) のようにバージョンを指定しながらバージョンアップする。
  • 1つずつ上からバージョンアップする。関連しそうなところを動作確認しながら進める。

特に問題がでなければ画面キャプチャは撮りません。

  • npm install --save-dev acorn@8.5.0
  • npm install --save-dev axios@0.21.4
  • npm install --save-dev browser-sync@2.27.5
  • npm install --save-dev http-proxy-middleware@2.0.1
  • npm install --save-dev jquery@3.6.0
  • npm install --save-dev jquery-mockjax@2.6.0
  • npm install --save-dev nock@13.1.3

npm install コマンドを実行してから(npm scripts の postinstall の処理を実行するため) npm test コマンドを実行すると全てのテストが成功しました。

f:id:ksby:20211001010223p:plain

npm run build コマンドも正常に終了しました。

f:id:ksby:20211001012513p:plain

clean タスク実行 → Rebuild Project 実行 → build タスク実行は npmTest タスクでエラーになりました。

f:id:ksby:20211001012923p:plain

原因は nvm use 14.18.0 コマンド実行後に IntelliJ IDEA を再起動していないため、D:\nodejsディレクトリ(コマンド実行後に作成されるシンボリックリンク)を認識できていないからでした。

IntelliJ IDEA を再起動すれば認識されるはずですが、Gradle の npm-script 実行用のプラグインは cmd.exe を呼び出さなくてもよい https://github.com/node-gradle/gradle-node-plugin が出ているので、切り替えることにします。

Gradle の npm-script 実行用のプラグインcom.moowork.node:1.3.1com.github.node-gradle.node:3.1.1 に変更する

build.gradle の以下の点を変更します。

plugins {
    ..........
    id "com.github.node-gradle.node" version "3.1.1"
    ..........
}

..........

task npmTest(type: NpmTask) {
    args = ["test"]
}
task npmBuild(type: NpmTask) {
    args = ["run", "build"]
}
npmBuild.dependsOn npmTest
processResources.dependsOn npmBuild
  • plugins block の以下の点を変更します。
    • id "com.moowork.node" version "1.3.1"id "com.github.node-gradle.node" version "3.1.1" に変更します。
  • npmTest タスクの以下の点を変更します。
    • type を ExecNpmTask に変更します。
    • commandLine "cmd", "/c", "npm test >NUL 2>&1"args = ["test"] に変更します。
  • npmBuild タスクの以下の点を変更します。
    • type を ExecNpmTask に変更します。
    • commandLine "cmd", "/c", "npm run build >NUL 2>&1"args = ["run", "build"] に変更します。

Gradle Tool Window の左上にある「Refresh all Gradle projects」ボタンをクリックして更新します。

clean タスク実行 → Rebuild Project 実行 → build タスク実行は問題なく BUILD SUCCESSFUL のメッセージが出力されて成功し、

f:id:ksby:20211001020304p:plain

gebTest タスクも BUILD SUCCESSFUL のメッセージが出力されて成功しました。

f:id:ksby:20211001020845p:plain

今回は browser-sync と http-proxy-middleware をバージョンアップしたので npm run springboot で起動してみましたが特に問題なく起動しました。

f:id:ksby:20211001022513p:plain f:id:ksby:20211001022603p:plain

履歴

2021/10/01
初版発行。