かんがるーさんの日記

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

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

概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その35 )( Geb でテストを作成する2 ) の続きです。

  • 今回の手順で確認できるのは以下の内容です。
    • https://nodejs.org/ja/ を見ると Node.js の推奨版が 8.9.1 LTS になっていたので、バージョンアップします。
    • npm も 5.5.1 へバージョンアップし、5.2.0 以降で使えるようになった npx コマンドを試してみます。

参照したサイト・書籍

  1. Node8の注目的変更まとめ
    http://abouthiroppy.hatenablog.jp/entry/2017/05/30/090015

  2. npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう
    https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533d

  3. nodistでNode.jsのバージョン管理
    https://qiita.com/hitomatagi/items/ad5f28ccd095b962f8ba

目次

  1. Node.js を 6.11.1 → 8.9.1 へ、npm を 4.0.5 → 5.5.1 へバージョンアップする
  2. npx コマンドを使用してみる+package.json を変更する

手順

Node.js を 6.11.1 → 8.9.1 へ、npm を 4.0.5 → 5.5.1 へバージョンアップする

nodist dist コマンドを実行して 8.9.1 がインストール可能か確認します。

f:id:ksby:20171126021453p:plain f:id:ksby:20171126021616p:plain

8.9.1 が表示されていますので、8.9.1 へバージョンアップします。

f:id:ksby:20171126025112p:plain

npm も最新版にバージョンアップします。npm の最新バージョンは https://docs.npmjs.com/ の一番下を見ると 5.5.1 とありましたので、

f:id:ksby:20171126025857p:plain

5.5.1 にバージョンアップします。

f:id:ksby:20171126030121p:plain

npm run springboot コマンドを実行すると特にエラーが出ずに各 npm-scripts も実行されました。

f:id:ksby:20171126030604p:plain f:id:ksby:20171126030727p:plain

npx コマンドを使用してみる+package.json を変更する

npm のバージョンを 5.2.0 以降にすれば npx コマンドが使えるとのことですが、npx コマンドを実行しようとしてもコマンドがありませんでした。

f:id:ksby:20171127004300p:plain

nodist で npm をバージョンアップすると npm 自体のバージョンは上がりますが、npx が入っていないようです。npm install -g npm@5.5.1 でバージョンアップしてみます。

f:id:ksby:20171127005226p:plain f:id:ksby:20171127005352p:plain

今度は npx コマンドが使えるようになりました。

npx コマンドで直接パッケージを呼び出せるようになりましたので、package.json から不要な npm-scripts を削除します。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "run-s clean:static-dir copy:all",
    "clean:static-dir": "rimraf src/main/resources/static/*",
    "copy:all": "run-p copy:bootstrap copy:admin-lte copy:font-awesome copy:ionicons copy:jquery-ui-css",
    "copy:bootstrap": "cpx node_modules/bootstrap/dist/**/* src/main/resources/static/vendor/bootstrap",
    "copy:admin-lte": "cpx node_modules/admin-lte/dist/**/* src/main/resources/static/vendor/admin-lte",
    "copy:font-awesome": "cpx node_modules/font-awesome/{css,fonts}/**/* src/main/resources/static/vendor/font-awesome",
    "copy:ionicons": "cpx node_modules/ionicons/dist/{css,fonts}/**/* src/main/resources/static/vendor/ionicons",
    "copy:jquery-ui-css": "cpx node_modules/jquery-ui/themes/base/**/* src/main/resources/static/vendor/jquery-ui/css",
    "postcss:watch": "postcss src/main/assets/css/**/* -d src/main/resources/static/css -x .min.css -w --poll",
    "webpack:watch": "webpack --watch",
    "browser-sync:start": "browser-sync start --config bs-config.js",
    "browser-sync:springboot": "browser-sync start --config bs-springboot-config.js",
    "server": "run-p postcss:watch webpack:watch browser-sync:start",
    "springboot": "run-p postcss:watch webpack:watch browser-sync:springboot"
  },
  • 以下の2行を削除します。
    • "webpack": "webpack"
    • "browser-sync": "browser-sync"

npx でパッケージが直接呼び出せるようになりましたので、npx webpack -v を実行すれば webpack のバージョンが表示されます。

f:id:ksby:20171127010323p:plain

履歴

2017/11/27
初版発行。