Wie wir von Vue auf Vue 3 migriert sind

Vor etwa einem Jahr sind wir endlich von Vue 2 auf Vue 3 migriert. Es dauerte 6 Monate bis zum offiziellen Lebensende. Zu diesem Zeitpunkt umfasste unsere App rund 100 Seiten und 300 Komponenten und nutzte einige der klassischen Abhängigkeiten, die mit Vue verbunden sind: Vue-router, Pinia (und Pinia ORM), Vue-i18n, TipTap, ElementUI (ElementPlus für Vue 3)

Hier sind ein paar Ratschläge, die uns geholfen haben. Da Vue 2 immer noch ziemlich gut funktioniert, nehmen Sie sich besser die Zeit, die Migration zu erleichtern, anstatt sie zu überstürzen, Ihre App zu beschädigen und Ihre Moral zu zerstören!

---

1️⃣ Bevor es losgeht

Andere warnen

Die Dinge werden sicherlich kaputt gehen, auch nur ein bisschen. Stellen Sie besser sicher, dass es mit anderen Teams in Ordnung ist.

Aktualisieren Sie auf die neueste Vue 2.7

Da die meisten neuen Funktionen in Vue 2.7 verfügbar und rückkompatibel sind, ist es natürlich wichtig, nachzuholen, falls Sie dies noch nicht getan haben. Während der Migration auf Vue 3 können Sie dessen Funktionen weiterhin nutzen. Auch der Schritt zur Migration wird kleiner.

Nehmen Sie sich Zeit

Dies kann eine ziemlich große Arbeit sein, daher sollten Sie besser damit rechnen, das Risiko über einen langen Zeitraum zu mindern. Außerdem hat es uns (den Entwicklern) geholfen, die Moral zu wahren! Planen Sie ein paar Wochen oder sogar Monate ein, da Sie wissen, wann Sie anfangen, aber nicht wissen, wann Sie fertig sind ... Schließlich ist es besser, jede Woche etwas Zeit einzuplanen, damit ein Ausfall nicht katastrophal ist.

Bilden Sie ein Team

Verlassen Sie sich nach Möglichkeit nicht nur auf einen Entwickler, da dies eine anstrengende Aufgabe ist. Außerdem benötigen Sie schnelle Feedback- und Zusammenführungsschleifen, da sich viele Änderungen auf die gesamte Codebasis auswirken und täglich zu Konflikten führen können. Es ist schon schwer genug, ohne sich damit auseinandersetzen zu müssen!

Testgesteuerte Migration

Die Hälfte der Zeit wird damit verbracht, die gesamte App zu testen, damit Sie sie besser so weit wie möglich automatisieren können. Nach unserer Erfahrung:

• Unit-Tests sind nicht sehr nützlich, da sie normalerweise Dinge testen, die nicht wirklich mit Vue verknüpft sind (z. B. nur „reine JS“-Funktionen), sodass wir uns nicht darauf konzentriert haben
• Komponententests mit Vue-Test-Utils waren mühsam zu migrieren, am Ende mussten wir sogar einige davon deaktivieren
• End-to-End-Tests waren am wertvollsten, da sie nicht an irgendwelche JS- oder Vue-Interna gebunden sind und fehlschlugen, sobald ein Fehler in der App weggeworfen wurde

Zusammenfassend lässt sich sagen, dass es am besten ist, einen sogenannten „Rauchtest“ zu erstellen, bei dem Sie einfach innerhalb der App mit dem grundlegendsten Szenario navigieren, das Ihnen einfällt. Halten Sie sie einfach, damit sie schnell sind. Denn je früher Sie sie zum Laufen bringen können, desto nützlicher sind sie. Bonuspunkt, wenn sie vor der Zusammenführung ausgeführt werden (z. B. in einem CI).

Geben Sie alles ein

TypeScript hat ein wenig geholfen, aber die Unterstützung dafür in Vue 2 ist immer noch dürftig. Die Verwendung von TypeScript ist immer noch eine gute Idee, hilft dort aber möglicherweise nicht allzu viel. Sobald Sie Vue 3 verwenden, wird die Setup-Syntax jedoch Ihr bester Freund sein!

Fusseln Sie alles

Es ist offensichtlich, aber es werden viele Änderungen im Code passieren, ebenso wie viele Fehler. Ein einfaches ESLint/Prettier kann viel Zeit sparen. Wenn Sie sie bereits haben, können Sie während der Migration die neuen Regeln für Vue 3 überprüfen: https://eslint.vuejs.org/rules/

Verwenden Sie Vite

Wir waren bereits von Webpack auf Vite migriert, bevor wir mit der Migration von Vue begonnen haben. Daher bin ich mir nicht sicher, ob es viel hilft, aber da es heute der klare Standard ist, geben einige Plugins möglicherweise nicht einmal Anweisungen für ein Upgrade mit Webpack. Ich denke, es ist sicherer, es zuerst zu tun, da Vite Vue 2 unterstützt, aber im Gegenteil, das Vue 3-Ökosystem unterstützt Webpack möglicherweise nicht.

---

2️⃣ Zuerst kleine Schritte

Ziel ist es, beim tatsächlichen Upgrade von Vue selbst möglichst wenige Änderungen vorzunehmen.

Aktualisieren Sie Abhängigkeiten

Sehen Sie sich jede Vue-bezogene Abhängigkeit an, die Sie verwenden, und prüfen Sie, ob es eine Version gibt, die sowohl Vue 2 als auch Vue 3 unterstützt, und aktualisieren Sie darauf. Vue-demi hat vielen Plugin-Betreuern dabei geholfen, dies zu erreichen, daher besteht eine gute Chance, dass es verfügbar ist.

Vielleicht möchten Sie beispielsweise von Vuex auf Pinia migrieren, das beide Versionen unterstützt (Vuex erfordert noch eine kleine Migration) und ohnehin der neue Standard ist.

Abhängigkeiten ersetzen

Für andere Abhängigkeiten möchten Sie möglicherweise prüfen, ob eine moderne Alternative Ihren Anforderungen entspricht. Beispielsweise haben wir vue-mq durch vue-use ersetzt.

Monkeypatch bei Bedarf

Wir mussten pragmatisch sein. Da einige Migrationen schwieriger waren als andere, haben wir letztendlich eine kleine Abstraktionsebene erstellt, um das Problem zu beheben. Wir hatten zum Beispiel Schwierigkeiten mit vue-i18n v9, das einige (manchmal nicht dokumentierte) Breaking Changes mit sich bringt. Deshalb haben wir schließlich einen Helfer erstellt, der eine benutzerdefinierte Version von $t verfügbar macht, um zu verhindern, dass jede Komponente neu geschrieben werden muss (da diese am häufigsten verwendete Funktion jetzt praktisch ohne Grund keine „Null“-Werte akzeptiert). Mit anderen Worten: Seien Sie nicht zu perfektionistisch!

---

3️⃣ Beginnen Sie mit der Migration

Jetzt beginnt die harte Arbeit. Alles, was wir zuvor getan haben, wird den Schmerz lindern. Hier gibt es keine Zauberei, es wird wahrscheinlich der schwierigste Teil der Migration sein.

Ändere alles, aber nichts

Ersetzen Sie Vue 2 durch Vue 3 mit dem „Migrations-Build“ (auch Kompatibilitätsmodus genannt), indem Sie den Anweisungen folgen.

Deaktivieren Sie alle verfügbaren Flags, damit die App fast wie mit Version 2 läuft.

Stellen Sie sicher, dass sich keine bahnbrechenden Änderungen auf Ihre App auswirken, oder beheben Sie sie.

Kleine Schritte

Aktivieren Sie schrittweise jedes Flag und testen Sie die App gründlich. Wenn die Migration einiger Komponenten zu schwierig ist, denken Sie daran, dass Sie die Kompatibilitätsoption außer Kraft setzen können. Sie führen also besser alles zusammen, behalten aber ein paar Komponenten für die spätere Migration bei, anstatt darauf zu warten, dass die gesamte App sofort funktioniert. Versuchen Sie nicht, alles auf einmal zu reparieren, sondern lassen Sie ein paar Tage vergehen, damit Sie alle Fehler erkennen (und Ihre geistige Gesundheit wieder aufladen können).

Große Schritte

Einige Abhängigkeiten bieten jedoch keine Verknüpfungen. In unserem Fall war die Migration unserer UI-Bibliothek von ElementUI (Vue 2) zu ElementPlus (Vue 3) schwierig und konnte nicht in kleinere Schritte aufgeteilt werden. Ich habe gehört, dass es für Vuetify noch schwieriger war. Dafür müssen Sie stark und geduldig sein und sich die Zeit nehmen, alles auf einmal zu erledigen. Planen Sie dafür vielleicht eine ganze Woche in Ihrem Teamkalender ein!

Denken Sie daran, dass Sie das Kompatibilitätsverhalten jeder Komponente, die Sie zur Laufzeit importieren, immer noch überschreiben können:

import { ElButton } from 'element-plus'

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

Letzter Schritt

Sobald alle Flags aktiviert wurden, ist es an der Zeit, den Migrations-Build zu entfernen. Hoffentlich entdecken Sie jetzt keine neuen unerwarteten Probleme!

Vergiss nicht zu feiern, du hast es verdient! ?

Das obige ist der detaillierte Inhalt vonWie wir von Vue auf Vue 3 migriert sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!