概要

記事一覧はこちらです。

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

今回の手順で確認できるのは以下の内容です。
- Node.js を 10.15.3 → 12.16.3 へ、npm を 6.9.0 → 6.14.5 へバージョンアップします。
- また npm でインストールしているモジュールを一部を除き最新のバージョンにします。

参照したサイト・書籍

chimurai / http-proxy-middleware
https://github.com/chimurai/http-proxy-middleware

まずは現在の状況を確認する
nodist は 0.9.1 のまま
Node.js を 12.16.3 へ、npm を 6.14.5 へバージョンアップする
モジュールを最新のバージョンにする
Replace Autoprefixer browsers option to Browserslist config. のメッセージが表示されないようにする

手順

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

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

f:id:ksby:20200506103301p:plain

nodist は 0.9.1 のまま

https://github.com/nullivex/nodist/releases を見ると nodist の最新バージョンは 0.9.1 のままでした。更新が止まっている？と思って最近の Windows の Node.js バージョン管理ツールを調べてみましたが、

Windows の Node.js バージョン管理ツールは nodist と nvm-windows がある。
nodist の最新バージョンは 0.9.1、リリース日は 30 Mar 2019。
nvm-windows の最新バージョンは 1.1.7 - Maintenance Release、リリース日は 2 Aug 2018。
nodist のリリースが止まっているので nvm-windows に変更したという記事を見かけたが、
- nodist は 0.8.8（17 Dec 2016 リリース）でリリースが止まっていたが @nullivex さんがメンテナンスするようになり 0.9.x が 28 Mar 2019 からリリースされている。
- nvm-windows の最新バージョンが 1.1.7 - Maintenance Release（2 Aug 2018 リリース）なので nodist の方がメンテナンスされている模様。

という状況でしたので、nodist の 0.9.1 を引き続き使用します。

Node.js を 12.16.3 へ、npm を 6.14.5 へバージョンアップする

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

f:id:ksby:20200506110146p:plain

Node.js を 12.16.3 にバージョンアップします。

f:id:ksby:20200506110407p:plain

npm の最新バージョンは https://github.com/npm/cli/releases を見ると 6.14.5 でした。

f:id:ksby:20200506110633p:plain

6.14.5 にバージョンアップします。。。が、nodist npm global 6.14.5 を実行するとなぜかファイルを最後までダウンロードできません。

f:id:ksby:20200506112403p:plain

ブラウザから https://codeload.github.com/npm/cli/tar.gz/v6.14.5 にアクセスして cli-6.14.5.tar.gz をダウンロード・解凍した後、D:\Nodist\npmv\6.14.5 にコピーします。

f:id:ksby:20200506112648p:plain

残りのコマンドを実行します。手動でファイルをダウンロードしたので nodist npm 6.14.5 を実行する必要がありました。またプロジェクト直下に node-tar-extract フォルダが作成されていたので削除しました。

f:id:ksby:20200506113252p:plain

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

バージョンアップ可能なモジュールを確認します。IntelliJ IDEA のメインメニューから「File」-「Settings...」を選択して「Settings」ダイアログを開き、画面左側で「Language & Frameworks」-「Node.js and NPM」を選択します。

画面右側にモジュールの一覧と現行バージョン、最新バージョン一覧が表示されます。

f:id:ksby:20200506114056p:plain f:id:ksby:20200506114129p:plain

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

admin-lte、bootstrap、ionicons は現行のまま。
mobx、mobx-utils は少し触ってみただけなのでバージョンアップしない。
eslint、jest + widows-build-tools、postcss-cli、prettier、stylelint + stylelint-config-standard は別に章を分けてバージョンアップする。
バージョンアップは npm update ではなく npm install --save-dev autoprefixer@8.0.0（package.json の dependencies に記載されているものは --save、devDependencies に記載されているものは --save-dev にする）のようにバージョンを指定しながらバージョンアップする。
１つずつ上からバージョンアップする。関連しそうなところを動作確認しながら進める。
@vue/cli は boot-npm-geb-sample プロジェクトでは使用していないので、ここではバージョンアップしない。

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

npm install --save-dev acorn@7.1.1
npm install --save-dev autoprefixer@9.7.6
npm install --save-dev axios@0.19.2
npm install --save-dev browser-sync@2.26.7
npm install --save-dev http-proxy-middleware@1.0.3
npm install --save-dev jquery@3.5.1
npm install --save-dev jquery-mockjax@2.5.1
npm install --save-dev nock@12.0.3
npm install --save-dev rimraf@3.0.2
npm install --save-dev uglifyjs-webpack-plugin@2.2.0
npm install --save-dev webpack@4.43.0
npm install --save-dev webpack-cli@3.3.11
npm install --save-dev xhr-mock@2.5.1

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

f:id:ksby:20200506133108p:plain

npm run build コマンドは終了はしましたが、Replace Autoprefixer browsers option to Browserslist config. ... というメッセージが表示されました。

f:id:ksby:20200506133341p:plain

最後に表示されていた Browserslist: caniuse-lite is outdated. Please run next command npm update を Web で検索すると https://github.com/postcss/autoprefixer/issues/1184 が見つかりました。npx browserslist@latest --update-db を実行します。

f:id:ksby:20200506134739p:plain

コマンド実行後は Replace Autoprefixer browsers option to Browserslist config. ... というメッセージは消えませんでしたが、Browserslist: caniuse-lite is outdated. Please run next command npm update のメッセージは表示されなくなりました。

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

f:id:ksby:20200506140029p:plain

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

f:id:ksby:20200506140755p:plain

今回は browser-sync と http-proxy-middleware をバージョンアップしたので npm run springboot で起動してみましたが、TypeError: httpProxyMiddleware is not a function というメッセージが表示されて起動しませんでした。

f:id:ksby:20200506161026p:plain

https://github.com/chimurai/http-proxy-middleware を見ると const { createProxyMiddleware } = require('http-proxy-middleware'); という書き方に変わっていたので、bs-springboot-config.js を以下のように変更します。

const {createProxyMiddleware} = require("http-proxy-middleware");
const proxy = createProxyMiddleware(
  [
    // /css, /js, /vendor と *.html は Tomcat に転送しない
    "!/css/**/*",
    "!/js/**/*",
    "!/vendor/**/*",
    "!/**/*.html",
    "/**/*"
  ],
  {target: "http://localhost:8080"}
);

..........

var httpProxyMiddleware = require("http-proxy-middleware"); → const {createProxyMiddleware} = require("http-proxy-middleware"); に変更します。
var proxy = httpProxyMiddleware( → const proxy = createProxyMiddleware( に変更します。

npm run springboot を実行すると今度は browser-sync が起動しました。Web アプリを起動してブラウザから画面へのアクセスしても問題ありませんでした。

f:id:ksby:20200506161753p:plain f:id:ksby:20200506161845p:plain

`Replace Autoprefixer browsers option to Browserslist config.` のメッセージが表示されないようにする

browsers の設定項目があるファイルがあるか検索したところ postcss.config.js の中に browsers: ["last 2 versions"] という記述がありました。これが原因と思われるので以下のように変更します。

module.exports = {
  plugins: [
    require("stylelint"),
    require("autoprefixer")({
      browserlist: ["last 2 versions"]
    }),
    require("cssnano")({
      preset: "default"
    })
  ]
};