長いこと放置していたアプリを久しぶりにまとめてアップデートする際に便利なパッケージの紹介です。package.jsonの中のライブラリをいっこずつチェックするなんて面倒くさいですからね。。。
- 準備
- アップグレード
- アップグレード可能なパッケージ一覧の確認
- まとめてバージョンアップ
- おまけ
- WARN Using an Array as build.postcss will be deprecated in Nuxt 3. Please switch to the object declaration
- Consider using Sass’s color functions instead.
- Module parse failed: Unexpected token
- Vue packages version mismatch
- gyp ERR! stack Error: gyp failed with exit code: 1
準備
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-rgbaudit 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.jswebpackは.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 npmgyp 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
