Vue o Vue 3에서 마이그레이션한 방법

약 1년 전 마침내 Vue 2에서 Vue 3으로 마이그레이션했습니다. 공식적으로 종료되기까지 6개월이 걸렸습니다. 당시 우리 앱에는 약 100페이지와 300개의 구성 요소가 있었고 Vue-router, Pinia(및 Pinia ORM), Vue-i18n, TipTap, ElementUI(Vue 3용 ElementPlus)와 같은 Vue와 관련된 일부 고전적인 종속성을 사용했습니다. 🎜>

다음은 우리에게 도움이 된 몇 가지 조언입니다. Vue 2는 여전히 잘 작동하므로, 성급하게 마이그레이션하여 앱을 깨뜨리고 도덕성을 파괴하는 대신 마이그레이션을 쉽게 하는 데 시간을 투자하는 것이 좋습니다!

---

1️⃣ 시작하기 전에

다른 사람에게 경고

조금이라도 문제가 생길 수 있습니다. 다른 팀과도 괜찮은지 확인하는 것이 좋습니다.

최신 Vue 2.7로 업그레이드

분명히 대부분의 새로운 기능은 Vue 2.7에서 사용할 수 있고 역호환 가능하므로 아직 가지고 있지 않은 경우 따라잡는 것이 중요합니다. Vue 3으로 마이그레이션하는 동안에도 해당 기능을 계속 사용할 수 있습니다. 마이그레이션 단계도 작아집니다.

시간을 가져라

이 작업은 상당히 큰 작업일 수 있으므로 장기간에 걸쳐 위험을 완화할 것으로 예상하는 것이 좋습니다. 또한 우리(개발자)가 도덕성을 유지하는 데 도움이 되었습니다! 언제 시작할지는 알지만 언제 완료할지는 알 수 없으므로 몇 주 또는 몇 달을 계획하세요. 마지막으로, 정전이 발생해도 재앙이 되지 않도록 매주 약간의 시간을 할애하는 것이 좋습니다.

팀 만들기

힘든 작업이므로 가능하면 한 명의 개발자에게만 의존하지 마세요. 또한 많은 변경 사항이 전체 코드베이스에 영향을 미치고 매일 충돌을 일으킬 수 있으므로 빠른 피드백 및 병합 루프가 필요합니다. 이걸 처리하지 않아도 이미 충분히 어렵습니다!

테스트 기반 마이그레이션

시간의 절반은 전체 앱을 테스트하는 데 사용되므로 최대한 자동화하는 것이 좋습니다. 경험상:

단위 테스트는 일반적으로 Vue에 실제로 연결되지 않은 항목(예: "순수 JS" 기능만)을 테스트하기 때문에 그다지 유용하지 않습니다. 따라서 우리는 이에 집중하지 않았습니다.
vue-test-utils를 사용한 구성 요소 테스트는 마이그레이션하기가 어려웠고 결국 일부 기능을 비활성화해야 했습니다
종단 간 테스트는 JS 또는 Vue 내부에 연결되지 않았고 앱에서 오류가 발생하자마자 실패했기 때문에 가장 가치가 있었습니다

결론적으로 가장 좋은 것은 생각할 수 있는 가장 기본적인 시나리오로 앱 내에서 탐색하는 소위 "스모크 테스트"를 만드는 것입니다. 간단하게 유지하여 속도를 높이십시오. 왜냐하면 빨리 실행할수록 유용성이 높아지기 때문입니다. 병합하기 전에 실행하면 보너스 포인트가 제공됩니다(예: CI에서).

모든 것을 입력하세요

TypeScript가 약간 도움이 되었지만 Vue 2에서의 지원은 여전히 ​​열악합니다. TypeScript를 사용하는 것은 여전히 ​​좋은 생각이지만 그다지 도움이 되지 않을 수도 있습니다. Vue 3를 사용하면 설정 구문이 가장 좋은 친구가 될 것입니다!

모든 것을 린트하세요

당연하지만 코드에서 많은 변경이 발생하므로 오류도 많이 발생합니다. 간단한 ESLint / Prettier를 사용하면 많은 시간을 절약할 수 있습니다. 이미 가지고 있다면 마이그레이션하는 동안 Vue 3의 새로운 규칙을 확인할 수 있습니다: https://eslint.vuejs.org/rules/

VITE 사용

Vue 마이그레이션을 시작하기 전에 이미 Webpack에서 Vite로 마이그레이션했기 때문에 많은 도움이 될지는 모르겠지만, 오늘날의 명확한 표준이므로 일부 플러그인에서는 Webpack으로 업그레이드하라는 지침조차 제공하지 않을 수도 있습니다. Vite가 Vue 2를 지원하기 때문에 먼저 하는 것이 더 안전할 것 같지만, 반대로 Vue 3 생태계는 Webpack을 지원하지 않을 수도 있습니다.

---

2️⃣ 작은 발걸음부터

실제로 Vue 자체를 업그레이드할 때 가능한 변경 사항을 줄이는 것이 목표입니다.

업그레이드 종속성

사용하는 모든 Vue 관련 종속성을 살펴보고 Vue 2와 Vue 3을 모두 지원하는 버전이 있는지 확인한 후 업그레이드하세요. Vue-demi는 이를 달성하는 데 많은 플러그인 관리자를 도왔으므로 사용 가능 가능성이 높습니다.

예를 들어 Vuex에서 두 버전을 모두 지원하고(Vuex는 여전히 소규모 마이그레이션이 필요함) 어쨌든 새로운 표준인 Pinia로 마이그레이션할 수 있습니다.

종속성 교체

다른 종속성의 경우 귀하의 요구 사항에 맞는 최신 대안이 있는지 확인하고 싶을 수도 있습니다. 예를 들어 vue-mq를 vue-use로 대체했습니다.

필요할 때 몽키패치

우리는 실용적이어야 했기 때문에 일부 마이그레이션은 다른 마이그레이션보다 어려웠기 때문에 결국 이를 해결하기 위해 작은 추상화 계층을 만들었습니다. 예를 들어, 우리는 일부(때때로 문서화되지 않은) 주요 변경 사항을 가져오는 vue-i18n v9에서 어려움을 겪었습니다. 그래서 우리는 모든 구성요소를 다시 작성하지 않아도 되도록 $t의 사용자 정의 버전을 노출하는 도우미를 마침내 만들었습니다(이제 가장 많이 사용되는 함수는 기본적으로 아무 이유 없이 "nullish" 값을 허용하지 않기 때문입니다). 즉, 너무 완벽주의자가 되지 마세요!

---

3️⃣ 마이그레이션 시작

이제 힘든 작업이 시작됩니다. 우리가 이전에 했던 모든 일은 고통을 덜어줄 것입니다. 여기에는 마법이 없습니다. 아마도 마이그레이션에서 가장 어려운 부분이 될 것입니다.

모든 것을 바꾸되 아무것도 바꾸지 마라

지침에 따라 Vue 2를 Vue 3으로 "마이그레이션 빌드"(호환 모드라고도 함)로 바꾸세요.

사용 가능한 모든 플래그를 끄면 앱이 버전 2와 거의 동일하게 실행됩니다.

앱에 영향을 미치는 주요 변경 사항이 없는지 확인하거나 수정하세요.

작은 발걸음

각 플래그를 점진적으로 활성화하고 앱을 철저하게 테스트하세요. 일부 구성요소를 마이그레이션하기가 너무 어려운 경우 해당 호환성 옵션을 재정의할 수 있다는 점을 기억하세요. 따라서 모든 것을 병합하는 것이 좋지만 전체 앱이 지금 작동할 때까지 기다리는 대신 나중에 마이그레이션할 수 있도록 몇 가지 구성 요소를 유지하는 것이 좋습니다. 한 번에 모든 것을 고치려고 하지 말고, 버그를 잡을 수 있도록(그리고 정신 건강을 재충전할 수 있도록) 며칠 정도 기다려 보세요.

큰 발걸음

그러나 일부 종속성은 바로가기를 제공하지 않습니다. 우리의 경우 UI 라이브러리를 ElementUI(Vue 2)에서 ElementPlus(Vue 3)로 마이그레이션하는 것이 어려웠고 더 작은 단계로 나눌 수 없었습니다. Vuetify가 더 어렵다고 들었습니다. 이를 위해서는 강인하고 인내심을 갖고 모든 일을 한꺼번에 수행할 시간이 필요합니다. 팀 일정에 일주일 전체를 허용할 수도 있습니다!

런타임에 가져오는 각 구성 요소의 호환성 동작을 재정의할 수 있다는 점을 기억하세요.

import { ElButton } from 'element-plus'

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

마지막 단계

모든 플래그가 켜지면 이제 마이그레이션 빌드를 제거할 차례입니다. 지금쯤은 예상치 못한 새로운 문제를 발견하지 않기를 바랍니다!

축하하는 것을 잊지 마세요. 당신은 그럴 자격이 있습니다! ?

위 내용은 Vue o Vue 3에서 마이그레이션한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!