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

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

---

1?? 始める前に

他の人に警告する

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

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

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

時(shí)間をかけて

これはかなり大規(guī)模な作業(yè)になる可能性があるため、長(zhǎng)期にわたってリスクを軽減することを想定した方がよいでしょう。また、それは私たち (開(kāi)発者) が道徳を守るのにも役立ちました。數(shù)週間、場(chǎng)合によっては數(shù)か月単位で計(jì)畫(huà)を立てましょう。いつ始めるかはわかりますが、いつ終わるかはわかりません。最後に、毎週ある程度の時(shí)間を割くほうがよいでしょう。そうすれば、障害が発生しても悲慘な結(jié)果にならないでしょう。

チームを作成する

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

テスト駆動(dòng)の移行

時(shí)間の半分はアプリ全體のテストに費(fèi)やされるため、可能な限り自動(dòng)化することをお?jiǎng)幛幛筏蓼?。私たちの経験では:

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

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

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

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

すべてに糸くずが出る

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

ヴァイトを使う

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

---

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

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

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

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

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

依存関係を置き換える

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

必要な場(chǎng)合のモンキーパッチ

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

---

3?? 移行を開(kāi)始する

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

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

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

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

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

小さな一歩

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

大きな一歩

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

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

import { ElButton } from 'element-plus'

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

最後のステップ

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

お祝いすることを忘れないでください。あなたには當(dāng)然のことです! ?

以上がVue から Vue 3 への移行方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。