Feature #4918: Upgrade Core Components

[mcdmaster]

👏 解決する issue / Resolved Issues

• close Upgrading Essential Components #4918

📝 関連する issue / Related Issues

• Feature #4918: Upgrade Core Components #4919 ※いったん、整理目的で勝手ながらクローズしました
• vue-spinner 1.0.4, autoprefixer 9.8.5 #5042
• vue-spinner, autoprefixer のアップグレード #5041
• @nuxt/typescript-build, eslint, nuxt-i18n のバージョンアップ #4954
• @nuxt/typescript-buildのバージョンアップなど #4943

⛏ 変更内容 / Details of Changes

モジュールアップグレード

• core-js2 -> core-js3
• @babel/core 7.10.4 -> 7.10.5
• jest および関連モジュール 25.5.x -> 26.1.0
• "resolutions" ブロックの package.json ファイルへの追加 - request, urix, resolve-url, chokidar 旧バージョン等、deprecated なモジュール類への依存関係解消（将来的に、古いモジュールは decommission すること）
• core-js3 対応に伴う nuxt.config.ts ファイルへのブロック追加
• その他、気づいたもの（@types/chart.js など）

※ GA 最新リリースを、可能な限り適用するようにしています。
※そのため、ベータ版は原則として使いません。

📸 スクリーンショット / Screenshots

UI への変更は一切なし

[kaizumaki]

@mcdmaster たびたび対応いただいて恐縮です。ありがとうございます！

"resolutions" ブロックの package.json ファイルへの追加

resolutionsというものがあるのを初めて知りました。こちらはどのようにメンテナンスするものなのでしょうか？コマンドがあれば知りたいです。

それと、webpackは以前package.jsonからは取り除いたと記憶しているのですが、こちらはいかがしましょう？

[mcdmaster]

@kaizumaki
"resolutions" ブロックは、本来は同じ名前の異なるロケーションにあるパッケージからの依存関係を定義する場合に使われるようです。ご参考
上記リンクによると、あいにく手作業でのメンテナンスが求められると読み取れます。

あと、webpack はテスト中に便宜的に（再）付与していたもので、単純に外し忘れです(汗
これは、取り除いておきますね

[kaizumaki]

@mcdmaster

上記リンクによると、あいにく手作業でのメンテナンスが求められると読み取れます。

なるほどですね。
やっぱり手動でのメンテナンスということに少し不安を覚えますね...。この先も続けていけるだろうか...という不安です。

一方で、少し古いのですが、こちらのissue #3841 を進めようと思っています。
なので、現段階では resolutions については保留にしたいのですが、いかがでしょう？

[mcdmaster]

@kaizumaki
あ、もちろん先入れ先出しで #3841 を進めていただいて結構です。

resolutions は、「使わない」という選択肢ももちろんあります。
それによって起こり得るデメリットとしては、deprecated なものも含めた旧の依存関係を親モジュールが先に見に行ってしまうことくらいだと思います。
ワーニングそのものは、無視して構わないレベルに留まるかと。ご参考となるようでしたら幸いです。

[mcdmaster]

コミットしてみたのですけど、私の指摘した #5087 のエラーがチェックプロセスで出てしまいますね。
dayjs は、package.json で 1.8.29 を指定しているんですけどね…うーん。

今回は、corejs3 の適用をメインにしました。
"resolutions" ブロックはいまだ experimental な段階なので、今回は見送ることとします。
あと、他にいくつかのリフレッシュを加えています。チェックが通り次第、別途説明します

[mcdmaster]

yarn.lock を覗いてみると、package.json でバージョン 1.8.29 を指定しているにもかかわらず、取得先のバージョンは 1.8.30 になってしまっています。こりゃダメだわ、です。
どうしてこうなるのか、特に他と dayjs との依存関係が併記されているわけでもないので、ちょっと原因がわからないですね。

dayjs@^1.8.29:
  version "1.8.30"
  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.8.30.tgz#d3b314d3ccdc179015d915fd3c6e14422c026378"
  integrity sha512-5s5IGuP5bVvIbOWkEDcfmXsUj24fZW1NMHVVSdSFF/kW8d+alZcI9SpBKC+baEyBe+z3fUp17y75ulstv5swUw==

[mcdmaster]

package.json の、"dayjs": "^1.8.29" のキャレット ^ を外してみました

[mcdmaster]

アップデートの説明です。

【core-js2 -> 3】

• 当初、nuxt.config.ts ファイルのアップデートを伴う移行手順を想定していました。最終的には、.babelrc ファイルのわずかな改修による対応に着地しました。情報源はこちら
• @babel/runtime-corejs3 というモジュールを追加インストールしています。

【メジャーアップグレードを伴うモジュール】
※マイナーバージョンアップの説明は割愛します。あえて言うなら「最新化」です。

• @nuxtjs/eslint-config-typescript : 他の関連モジュール（ex. @nuxtjs/eslint-config）と、バージョンの平仄を合わせた格好になっています。情報源はこちら
• jest, babel-jest : パフォーマンス改善などが実施されています。情報源はこちら
• prettier : CHANGELOG をご参照ください
• ts-loader : webpack@5 対応などが行われています。情報源はこちら
• vue-jest : メジャーバージョンは、ダウンしています。元々 package.json にはベータバージョンが記されていました。GA なバージョンに直しやすかった、すなわち、ベータバージョンの vue-jest と他のモジュールとの間の依存関係がそれほど多くなかった、あるいは複雑でなかったため、ダウングレードを実施しました

[mcdmaster]

package.json の下記の部分を変更している（nuxt export -> nuxt generate）のは、 @kaizumaki さんのこのコメントと関係があるかもしれません。

    "generate:deploy": "cross-env GENERATE_ENV=production nuxt-ts build && nuxt-ts generate",
    "generate:dev": "cross-env GENERATE_ENV=development nuxt-ts build && nuxt-ts generate",
    "generate": "eslint './**/*.{js,ts,vue}' && nuxt-ts build && nuxt-ts generate",
    "lint-and-generate": "eslint './**/*.{js,ts,vue}' && nuxt-ts build && nuxt-ts generate",

以下は、 #5075 がらみでビルドを試みた際に Nuxt からオコられたものです

[kaizumaki]

@mcdmaster

package.json の下記の部分を変更している（nuxt export -> nuxt generate）のは、 @kaizumaki さんのこのコメントと関係があるかもしれません。

どうやらそのようですね。ご対応いただき感謝です！

さきほどRenovateが立てたPRを一つ一つ見ながらマージしていきました。試験運用中なので、全てのアップデートにおいて自動マージはしない設定にしてあります。これらを一つ一つ検証していく作業はなかなかたいへんですね 😅
@mcdmaster さんの コメント はたいへん参考になりました。ありがとうございます！

ライブラリのアップデートは大部分でRenovateに任せることになったのですが、その運用方法は考えなければなあという感想です。この運用について、なにかアイディアがあれば伺いたいです。 @goki90210 さんにも。
よろしければ別issueを立てたいと思います。

こちらのPRについては、 dependenciesのアップデートは外した状態にしてもらえるといいかなと思っています。いかがでしょう？

[mcdmaster]

@kaizumaki
賛成です。ちょうど今コンフリクトが出ているので、いったんリフレッシュする前の（Renovate がこれからやる）版に dependencies と devDependencies のところを切り戻しておきますね

[NEKOYASAN]

nuxt generateからnuxt build & exportのコマンド変更、今後nuxt generateをdeprecatedにするって記載があったので行ってもらってたんですが....即Nuxt側が元に戻したんですね....

Webpack Buildのキャッシュ周りを設定すれば自動的にやってくれるようになったみたいですね...

お手間とらせてすみませんがnuxtアップデートの際に同時にgenerateにコマンドを戻していただけますと幸いです...

Edited: すでに戻していただいていたようでありがとうございます！
nuxt-ts build && nuxt-ts generateではなくnuxt-ts generateのみでも大丈夫なはずなんですがどうでしょうか?

[mcdmaster]

@Nekoya3

nuxt-ts build && nuxt-ts generateではなくnuxt-ts generateのみでも大丈夫なはずなんですがどうでしょうか?

たしかに、このあたりに書いてありますね。ご指摘ありがとうございます！
https://nuxtjs.org/blog/nuxt-static-improvements#generate-time-cache-vs-full-webpack-build
Now you only have to change your build command back from nuxt build && nuxt export to nuxt generate on the platform you are using. If you are using a CI, ensure that you are properly caching node_modules.

今後もちょくちょく直すところが出てくるはずですので、必ず含めるようにします

[kaizumaki]

@mcdmaster package.jsonのdependenciesに差分が出てしまっているので、差分を破棄してもらえると助かります！
こちらのPRが準備できましたら、 #5136 のnuxtのマイナーアップデートのPRをマージしようと思います。

[mcdmaster]

@kaizumaki
コミットし直し後、現在チェック中です～

[Update!!]
あれ、nuxt build && nuxt export も切り戻すんでしたっけ？

[kaizumaki]

@mcdmaster

あれ、nuxt build && nuxt export も切り戻すんでしたっけ？

いえ、この状態でOKです！ #5136 をマージしたほうがよさそうですね。

[kaizumaki]

ご対応いただき感謝です！LGTM！

[mcdmaster]

@kaizumaki
ありがとうございます！ #5075 の件など、まだまだやることはありますね！