Cara kami berhijrah dari Vue o Vue 3

Kira-kira setahun yang lalu kami akhirnya berhijrah dari Vue 2 ke Vue 3. Ia adalah 6 bulan sebelum tamat hayat rasminya. Pada masa itu, apl kami mempunyai sekitar 100 halaman dan 300 komponen, dan menggunakan beberapa kebergantungan klasik yang terikat dengan Vue: Vue-router, Pinia (dan Pinia ORM), Vue-i18n, TipTap, ElementUI (ElementPlus untuk Vue 3)

Berikut adalah beberapa nasihat yang membantu kami. Memandangkan Vue 2 masih berfungsi dengan baik, lebih baik anda luangkan masa untuk meredakan pemindahan daripada tergesa-gesa, merosakkan apl anda dan memusnahkan moral anda!

---

1️⃣ Sebelum bermula

Beri amaran kepada orang lain

Benda pasti akan rosak, walaupun sedikit. Anda lebih baik pastikan ia ok dengan pasukan lain.

Naik taraf kepada Vue 2.7 terkini

Jelas sekali, kerana kebanyakan ciri baharu tersedia dalam Vue 2.7, dan serasi semula, adalah penting untuk mengejar ketinggalan jika anda belum memilikinya. Semasa berhijrah ke Vue 3, anda masih boleh menikmati ciri-cirinya. Langkah untuk berhijrah juga akan menjadi lebih kecil.

Ambil masa

Ini boleh menjadi kerja yang agak besar jadi anda lebih baik menjangkakan untuk mengurangkan risiko dalam tempoh yang lama. Selain itu, ia membantu kami (pemaju) mengekalkan moral! Rancang beberapa minggu atau bulan, seperti yang anda tahu bila anda mula, tetapi anda tidak tahu bila anda akan selesai... Akhir sekali, lebih baik anda meluangkan sedikit masa setiap minggu, jadi sebarang gangguan tidak akan membawa bencana.

Buat pasukan

Jangan bergantung hanya pada satu pembangun jika boleh, kerana ia adalah tugas yang meletihkan. Selain itu, anda memerlukan maklum balas pantas & menggabungkan gelung, kerana banyak perubahan akan menjejaskan keseluruhan pangkalan kod dan boleh mewujudkan konflik setiap hari. Ia sudah cukup sukar tanpa perlu mengendalikan ini!

Penghijrahan yang dipacu ujian

Separuh masa akan diluangkan untuk menguji keseluruhan apl, jadi lebih baik anda mengautomasikannya sebaik mungkin. Mengikut pengalaman kami:

• Ujian unit tidak begitu berguna, kerana ia biasanya menguji perkara yang tidak benar-benar terikat dengan Vue (hanya fungsi "JS tulen" contohnya), kami tidak menumpukan padanya
• Ujian komponen dengan vue-test-utils adalah sukar untuk berhijrah, akhirnya kami terpaksa melumpuhkan sebahagian daripadanya
• Ujian hujung ke hujung adalah yang paling berharga kerana ia tidak terikat dengan mana-mana dalaman JS atau Vue dan gagal sebaik sahaja ralat dibuang dalam apl

Kesimpulannya yang terbaik ialah mencipta apa yang dipanggil "ujian asap", di mana anda hanya menavigasi dalam aplikasi dengan senario paling asas yang boleh anda fikirkan. Pastikan ia mudah, supaya ia pantas, kerana lebih cepat anda boleh membuatnya berjalan, jadi lebih berguna ia. Mata bonus jika ia dijalankan sebelum bergabung (dalam CI misalnya).

Taip semua

TypeScript membantu sedikit, tetapi sokongan untuknya dalam Vue 2 masih lemah. Menggunakan TypeScript masih merupakan idea yang baik, tetapi ia mungkin tidak terlalu membantu di sana; Setelah menggunakan Vue 3, sintaks persediaan akan menjadi kawan baik anda!

Lit semuanya

Ia jelas, tetapi banyak perubahan akan berlaku dalam kod, begitu juga dengan banyak ralat. ESLint / Prettier yang ringkas boleh menjimatkan banyak masa. Jika anda sudah memilikinya, anda boleh menyemak peraturan baharu untuk Vue 3 sementara anda berhijrah: https://eslint.vuejs.org/rules/

Gunakan Vite

Kami telah pun berhijrah daripada Webpack ke Vite sebelum mula memindahkan Vue, jadi saya tidak pasti ia banyak membantu, tetapi memandangkan ia adalah standard yang jelas hari ini, sesetengah pemalam mungkin tidak memberikan arahan untuk naik taraf dengan Webpack. Saya rasa lebih selamat untuk melakukannya dahulu kerana Vite menyokong Vue 2, tetapi sebaliknya ekosistem Vue 3 mungkin tidak menyokong Webpack.

---

2️⃣ Langkah kecil dahulu

Matlamatnya adalah untuk mendapatkan sedikit perubahan yang mungkin apabila benar-benar meningkatkan Vue itu sendiri.

Tingkatkan kebergantungan

Lihat setiap pergantungan berkaitan Vue yang anda gunakan, dan semak sama ada terdapat versi yang menyokong kedua-dua Vue 2 dan Vue 3, dan naik taraf kepadanya. Vue-demi banyak membantu penyelenggara pemalam untuk mencapainya, jadi ada kemungkinan besar ia tersedia.

Sebagai contoh, anda mungkin ingin berhijrah daripada Vuex ke Pinia, yang menyokong kedua-dua versi (Vuex masih memerlukan penghijrahan kecil) dan tetap merupakan standard baharu.

Gantikan kebergantungan

Untuk kebergantungan lain, anda mungkin ingin menyemak sama ada sebarang alternatif moden sesuai dengan keperluan anda. Sebagai contoh, kami menggantikan vue-mq dengan vue-use.

Monkeypatch apabila diperlukan

Kami perlu bersikap pragmatik, jadi memandangkan beberapa migrasi lebih sukar daripada yang lain, kami akhirnya mencipta lapisan kecil abstraksi untuk membetulkannya. Sebagai contoh, kami menghadapi masa yang sukar dengan vue-i18n v9 yang membawa beberapa perubahan (kadangkala tidak didokumentasikan). Jadi kami akhirnya mencipta pembantu yang mendedahkan versi tersuai $t untuk mengelakkan daripada menulis semula setiap komponen (kerana fungsi yang paling banyak digunakan ini kini tidak menerima nilai "batal" pada dasarnya tanpa sebab). Dalam istilah lain, jangan terlalu perfeksionis!

---

3️⃣ Mula berhijrah

Sekarang kerja keras bermula. Semua yang kita lakukan sebelum ini akan mengurangkan kesakitan. Tiada keajaiban di sini, ia mungkin merupakan bahagian yang paling sukar dalam penghijrahan.

Ubah segala-galanya, tetapi tiada apa-apa

Ganti Vue 2 oleh Vue 3 dengan "binaan migrasi" (juga dipanggil mod kompati) dengan mengikut arahan.

Matikan setiap bendera yang tersedia supaya apl berjalan hampir seperti yang dilakukan dengan versi 2.

Pastikan bahawa tiada perubahan yang rosak menjejaskan apl anda atau betulkan perubahan tersebut.

Langkah kecil

Dayakan setiap bendera secara berperingkat dan uji apl dengan teliti. Jika sesetengah komponen terlalu sukar untuk dipindahkan, perlu diingat bahawa anda boleh mengatasi pilihan keserasiannya; jadi lebih baik anda menggabungkan segala-galanya tetapi menyimpan beberapa komponen untuk berhijrah kemudian daripada menunggu seluruh apl berfungsi sekarang. Jangan cuba membetulkan semuanya sekaligus, biarkan beberapa hari berlalu supaya anda boleh menangkap sebarang pepijat (dan memulihkan kesihatan mental anda).

Langkah besar

Sesetengah kebergantungan tidak menyediakan pintasan. Dalam kes kami, memindahkan perpustakaan UI kami daripada ElementUI (Vue 2) kepada ElementPlus (Vue 3) adalah sukar dan tidak boleh dibahagikan kepada langkah yang lebih kecil. Saya dengar ia lebih sukar untuk Vuetify. Untuk ini, anda perlu kuat, sabar, dan mengambil masa untuk melakukannya sekaligus. Mungkin biarkan seminggu penuh untuknya dalam kalendar pasukan anda!

Ingat bahawa anda masih boleh mengatasi kelakuan keserasian setiap komponen yang anda import semasa masa jalan:

import { ElButton } from 'element-plus'

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

Langkah terakhir

Setelah setiap bendera dihidupkan, tiba masanya untuk mengalih keluar binaan migrasi. Semoga anda tidak akan menemui isu baharu yang tidak dijangka sekarang!

Jangan lupa untuk meraikannya, anda berhak mendapatnya! ?

Atas ialah kandungan terperinci Cara kami berhijrah dari Vue o Vue 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!