Vue から Vue 3 への移行方法

約 1 年前、私たちは最終的に Vue 2 から Vue 3 に移行しました。正式なサポート終了まであと 6 か月ありました。当時、私たちのアプリには約 100 ページと 300 のコンポーネントがあり、Vue-router、Pinia (および Pinia ORM)、Vue-i18n、TipTap、ElementUI (ElementPlus for Vue 3) など、Vue に関連付けられた古典的な依存関係のいくつかを使用していました。 🎜>

ここでは私たちに役立ったアドバイスをいくつか紹介します。 Vue 2 は依然として十分に機能するため、移行を急いでアプリを壊したりモラルを破壊したりするのではなく、時間をかけて移行を容易にする方がよいでしょう。

---

1️⃣ 始める前に

他の人に警告する

物は少しでも必ず壊れます。他のチームでも大丈夫かどうか確認したほうがいいです。

最新の Vue 2.7 にアップグレードする

明らかに、新機能のほとんどは Vue 2.7 で利用可能であり、レトロ互換性があるため、まだ持っていない場合は追いつくことが重要です。 Vue 3 に移行しても、引き続きその機能をお楽しみいただけます。移行のステップも小さくなります。

時間をかけて

これはかなり大規模な作業になる可能性があるため、長期にわたってリスクを軽減することを想定した方がよいでしょう。また、それは私たち (開発者) が道徳を守るのにも役立ちました。数週間、場合によっては数か月単位で計画を立てましょう。いつ始めるかはわかりますが、いつ終わるかはわかりません。最後に、毎週ある程度の時間を割くほうがよいでしょう。そうすれば、障害が発生しても悲惨な結果にならないでしょう。

チームを作成する

骨の折れる作業なので、できる限り 1 人の開発者だけに依存しないでください。また、多くの変更がコードベース全体に影響を及ぼし、日常的に競合が発生する可能性があるため、迅速なフィードバックとマージ ループが必要です。これに対処しなくても、すでに十分に難しいです!

テスト駆動の移行

時間の半分はアプリ全体のテストに費やされるため、可能な限り自動化することをお勧めします。私たちの経験では:

単体テストは通常​​、実際には Vue に関連付けられていないもの (たとえば「純粋な JS」関数のみ) をテストするため、あまり役に立ちません。ここでは重点を置きませんでした。
vue-test-utils を使用したコンポーネントのテストは移行が大変で、最終的には一部を無効にする必要さえありました
エンドツーエンドのテストは、JS や Vue の内部構造に関連付けられておらず、アプリでエラーが破棄されるとすぐに失敗したため、最も価値がありました

結論として、最善の方法は、いわゆる「スモーク テスト」を作成することです。そこでは、考えられる最も基本的なシナリオでアプリ内をナビゲートするだけです。高速になるようにシンプルにしてください。早く実行できるほど便利になるからです。 (CI などで) マージ前に実行するとボーナス ポイント。

すべてを入力してください

TypeScript は少し役に立ちましたが、Vue 2 でのサポートはまだ不十分です。 TypeScript を使用することは依然として良い考えですが、あまり役に立たない可能性があります。ただし、Vue 3 を使用すると、セットアップ構文はあなたの強い味方になります!

すべてに糸くずが出る

当たり前のことですが、コードには多くの変更が発生し、エラーも多く発生します。シンプルな ESLint / Prettier を使用すると、時間を大幅に節約できます。すでにお持ちの場合は、移行中に Vue 3 の新しいルールを確認できます: https://eslint.vuejs.org/rules/

ヴァイトを使う

Vue の移行を開始する前に、すでに Webpack から Vite に移行していたので、あまり役立つかどうかはわかりませんが、今日の明確な標準であるため、一部のプラグインでは Webpack でのアップグレードの指示さえ与えられない可能性があります。 Vite は Vue 2 をサポートしているため、最初に実行する方が安全だと思いますが、逆に Vue 3 エコシステムは Webpack をサポートしていない可能性があります。

---

2️⃣ まずは小さなステップから

目標は、実際に Vue 自体をアップグレードする際の変更を可能な限り少なくすることです。

依存関係をアップグレードする

使用しているすべての Vue 関連の依存関係を確認し、Vue 2 と Vue 3 の両方をサポートするバージョンがあるかどうかを確認し、それにアップグレードします。 Vue-demi は多くのプラグイン管理者がそれを達成するのに貢献したため、利用可能になる可能性は十分にあります。

たとえば、Vuex から Ponia に移行するとよいでしょう。Ponia は両方のバージョンをサポートし (Vuex はまだ小規模な移行が必要です)、とにかく新しい標準です。

依存関係を置き換える

他の依存関係については、最新の代替手段がニーズに合うかどうかを確認してください。たとえば、vue-mq を vue-use に置き換えました。

必要な場合のモンキーパッチ

私たちは現実的である必要があったため、一部の移行は他の移行よりも困難だったため、最終的にそれを修正するために小さな抽象化レイヤーを作成することになりました。たとえば、いくつかの (文書化されていない) 重大な変更をもたらす vue-i18n v9 には苦労しました。そこで最終的に、すべてのコンポーネントを書き直す必要がないように、$t のカスタム バージョンを公開するヘルパーを作成しました (この最もよく使用される関数は現在、基本的に理由もなく "null" 値を受け入れないためです)。言い換えれば、完璧主義になりすぎないでください!

---

3️⃣ 移行を開始する

さあ、大変な作業が始まります。私たちが以前に行ったことはすべて痛みを和らげます。ここには魔法はありません。おそらく移行で最も難しい部分になるでしょう。

すべてを変えるが、何も変えない

指示に従って、Vue 2 を「移行ビルド」(互換モードとも呼ばれる) の Vue 3 に置き換えます。

利用可能なすべてのフラグをオフにして、アプリがバージョン 2 とほぼ同じように動作するようにします。

アプリに影響を与える重大な変更がないことを確認するか、修正してください。

小さな一歩

各フラグを段階的に有効にし、アプリを徹底的にテストします。一部のコンポーネントの移行が難しい場合は、その互換性オプションをオーバーライドできることに留意してください。したがって、アプリ全体が今すぐ動作するのを待つのではなく、すべてをマージしますが、後で移行できるようにいくつかのコンポーネントを残しておくことをお勧めします。一度にすべてを修正しようとせず、数日経過してバグを見つけてください (そして精神的健康を充電してください)。

大きな一歩

一部の依存関係ではショートカットが提供されません。私たちの場合、UI ライブラリを ElementUI (Vue 2) から ElementPlus (Vue 3) に移行するのは難しく、小さなステップに分割することはできませんでした。 Vuetifyの場合はさらに難しかったと聞きました。そのためには、強く、忍耐強く、時間をかけてすべてを一度に行う必要があります。チームのカレンダーに丸 1 週間の予定を入れておいてください!

実行時にインポートする各コンポーネントの互換性動作をオーバーライドできることに注意してください。

import { ElButton } from 'element-plus'

ElButton.compatConfig = {
  FEATURE_ID_A: true // features can also be toggled at component level
}

最後のステップ

すべてのフラグをオンにしたら、移行ビルドを削除します。今までに新たな予期せぬ問題が発見されないことを祈ります!

お祝いすることを忘れないでください。あなたには当然のことです! ?

以上がVue から Vue 3 への移行方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。