Nuxtやその他ライブラリのバージョンを一気に上げる

nuxt.js開発関連

長いこと放置していたアプリを久しぶりにまとめてアップデートする際に便利なパッケージの紹介です。package.jsonの中のライブラリをいっこずつチェックするなんて面倒くさいですからね。。。

スポンサーリンク

準備

npm-check-updatesをインストールします。

$ npm install -g npm-check-updates

ソースはこちら

アップグレード

アップグレード可能なパッケージ一覧の確認

$ ncu
Checking /Users/hoge/package.json
[====================] 59/59 100%

 @nuxtjs/axios             ^5.3.1  →   ^5.4.1 
 babel-loader              ^7.1.5  →   ^8.0.5 
 bootstrap                 ^4.1.3  →   ^4.3.1 
 chart.js                  ^2.7.2  →   ^2.8.0 
 file-loader              ^1.1.11  →   ^3.0.1 
 ionicons                  ^4.3.0  →   ^4.5.5 
 leaflet                   ^1.3.3  →   ^1.4.0 
 moment                   ^2.22.2  →  ^2.24.0 
 nuxt                      ^1.4.2  →   ^2.5.1 
 nuxt-dropzone             ^0.2.7  →   ^1.0.1 
 postcss-loader            ^2.1.6  →   ^3.0.0 
 tinymce                   ^4.8.3  →   ^5.0.3 
 vue-i18n                  ^8.0.0  →  ^8.10.0 
 vue-js-modal             ^1.3.26  →  ^1.3.28 
 vue-loader               ^14.0.3  →  ^15.7.0 
 vue-multiselect           ^2.1.0  →   ^2.1.4 
 vue-style-loader          ^3.1.2  →   ^4.1.2 
 vue2-dropzone             ^3.2.2  →   ^3.5.8 
 ava                      ^0.25.0  →   ^1.4.1 
 babel-eslint              ^8.2.6  →  ^10.0.1 
 coffeescript              ^2.3.1  →   ^2.4.0 
 css-loader                ^1.0.0  →   ^2.1.1 
 eslint                    ^5.3.0  →  ^5.16.0 
 eslint-config-standard   ^11.0.0  →  ^12.0.0 
 eslint-loader             ^2.1.0  →   ^2.1.2 
 eslint-plugin-html        ^4.0.5  →   ^5.0.3 
 eslint-plugin-import     ^2.13.0  →  ^2.16.0 
 eslint-plugin-node        ^7.0.1  →   ^8.0.1 
 eslint-plugin-promise     ^3.8.0  →   ^4.0.1 
 eslint-plugin-standard    ^3.1.0  →   ^4.0.0 
 eslint-plugin-vue         ^4.7.1  →   ^5.2.2 
 jsdom                   ^11.12.0  →  ^14.0.0 
 node-sass                 ^4.9.2  →  ^4.11.0 
 postcss-nested            ^3.0.0  →   ^4.1.2 
 sass-resources-loader     ^1.3.3  →   ^2.0.0 
 style-loader             ^0.21.0  →  ^0.23.1 
 webpack                  ^3.10.0  →  ^4.29.6 

Run ncu -u to upgrade package.json

まとめてバージョンアップ

-uオプションでアップグレード実行です。これをやるとpackage.jsonが更新されます。

$ ncu -u

その後、ライブラリのインストールとビルドを実行します。

$ npm install
$ npm run build

こまかいその他オプションは公式サイトを参照してください。

おまけ

「nuxt ^1.4.2 → ^2.5.1」 で発生した警告やらです。

 WARN  vendor has been deprecated due to webpack4 optimization 

これはこちらを参照

WARN  Using an Array as build.postcss will be deprecated in Nuxt 3. Please switch to the object declaration

build.postcssが非推奨になったので別のものを使う必要があります。
一旦postcss系を全部消してからpostcss-preset-envをインストールします。

$ npm uninstall extract-text-webpack-plugin
$ npm uninstall postcss-hexrgba
$ npm uninstall postcss-nested
$ npm uninstall postcss-responsive-type
$ npm audit fix
$ npm install postcss-preset-env
$ npm install postcss-color-mod-function
$ npm install postcss-dir-pseudo-class
$ npm install postcss-focus-visible
$ npm install postcss-focus-within
$ npm install postcss-logical
$ npm install postcss-page-break
$ npm install postcss-color-rgb

audit fixをすると脆弱性のあるパッケージ問題を自動で解決してくれます。

Consider using Sass’s color functions instead.

こんな感じの警告

DEPRECATION WARNING on line 128 of /xxxxx/assets/css/theme/_buttons.scss:
The operation `#dfb81c minus 12` is deprecated and will be an error in future versions.
Consider using Sass's color functions instead.

これを使って書き直せってことだと思うのですが断念しました。。。

Module parse failed: Unexpected token

ERROR in ./.nuxt/router.js 7:24
Module parse failed: Unexpected token (7:24)
You may need an appropriate loader to handle this file type.
| 
| var _65320dcf = function _65320dcf() {
>   return interopDefault(import('../pages/contact.vue'
|   /* webpackChunkName: "pages/contact" */
|   ));
 @ ./.nuxt/index.js 8:0-43 69:19-31
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

webpackは.vueを読めないのでvue-loaderとvue-style-loaderをインストールします。ついでに必要なloaderがあれば。。。

$ npm install vue-loader
$ npm install vue-style-loader
$ npm install file-loader
$ npm install yaml-loader
$ npm install babel-loader

もしくはnuxt.config.jsに不要なコードが残ってるとエラーでます。たとえばこんなのがあったら、コメントアウトしてみてください。

build: {
  extend (config, { isDev, isClient }) {
     const vueLoader = config.module.rules.find((r) => {
        return r.loader === 'vue-loader'
      })
      vueLoader.options.preLoaders = vueLoader.options.preLoaders || {}
  }
}

いつの間にかテストツールが変わってたのでもとに戻しました。

$ npm uninstall acorn
$ npm install --save-dev ava

そででもダメだったので最終手段。npm installのやり直しをしたらうまくいきました。

$ rm package-lock.json
$ rm -f -R node_modules
$ rm -f -R .nuxt
$ npm install
$ npm run build

Vue packages version mismatch

2019/01/18追記

まとめてバージョンあげたあとにnuxt dev runしたときに発生したエラー

   ╭────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                            │
   │   ✖ Nuxt Fatal Error                                                                       │
   │                                                                                            │
   │   Error:                                                                                   │
   │                                                                                            │
   │   Vue packages version mismatch:                                                           │
   │                                                                                            │
   │   - vue@2.6.10                                                                             │
   │   - vue-server-renderer@2.6.11                                                             │
   │                                                                                            │
   │   This may cause things to work incorrectly. Make sure to use the same version for both.   │
   │                                                                                            │
   │                                                                                            │
   ╰────────────────────────────────────────────────────────────────────────────────────────────╯

globalにおいてしまったパッケージが悪さしてそうなのでnpmをupdateしたら解決

$ npm update
$ npm install -g npm

gyp ERR! stack Error: gyp failed with exit code: 1

2020-02-01追記
久しぶりに「npm audit fix」したら↓のエラーが。

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/hogehoge/.nodebrew/node/v10.16.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Darwin 19.2.0
gyp ERR! command "/Users/hogehoge/.nodebrew/node/v10.16.0/bin/node" "/Users/hogehoge/.nodebrew/node/v10.16.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/hogehoge/node_modules/watchpack/node_modules/fsevents
gyp ERR! node -v v10.16.0
gyp ERR! node-gyp -v v5.0.7
gyp ERR! not ok

macの場合はxcodeを入れ直せば解決

$ xcode-select -print-path
$ sudo rm -f -R 上で調べたパス(/Library/Developer/CommandLineToolsとか)
$ xcode-select --install
©2018 LLC Shimer-System.
image/svg+xml