Vue 3.1.0-beta 마이그레이션 빌드 문서 번역

kdeun1·2021년 5월 9일

개요

마이그레이션 빌드가 포함된 Vue 3.1.0-beta 버전이 릴리즈되었다.
@vue/compat(일명 "마이그레이션 빌드")은 Vue 2의 동작이 호환되는 구성을 제공하는 Vue 3의 빌드이다. 마이그레이션 빌드는 기본적으로 Vue 2에서 실행되며, 몇 가지 예외 케이스말고는 왠만한 공통 APIs는 Vue 2와 동일하게 사용하다. Vue 3에서 변경되었거나 더이상 지원되지 않는 기능을 사용하면 런타임 경고가 발생한다. 기능의 호환성은 컴포넌트별로 활성화/비활성화 할 수 있다.

제한점

마이그레이션 빌드가 가능한 한 Vue 2의 동작을 모방하도록 최선을 다했지만, 업그레이드 할 수 없는 몇 가지 제한사항이 있다.

Vue 2 내부 APIs나 문서화되지 않은 동작에 의존하는 종속성. 프로젝트가 Vuetify, Quasar, ElementUI와 같은 컴포넌트 라이브러리에 의존하는 경우 Vue 3 호환 버전을 기다리는 것이 가장 좋다.
IE 11 지원에 대한 문제. Vue 3은 공식적으로 IE 11를 지원하지 않으므로, IE 11 이하의 환경에서 개발하는 경우 Vue 2를 유지해야 한다.
SSR의 문제. 마이그레이션 빌드는 SSR에서 사용할 수 있지만, 커스텀된 SSR의 마이그레이션인 경우는 복잡하다. 일반적으로 vue-server-renderer를 @vue/server-renderer로 대체해야 한다. Vue 3은 번들 렌더러의 역할을 사용자 영역에서 할 수 있어 더이상 번들 렌더러를 지원을 하지 않아, Vite와 함께 Vue 3 SSR을 사용하는 것을 추천한다. Nuxt를 사용하는 경우 Nuxt 3을 기다리는 것이 좋다.

기대 효과

마이그레이션 빌드는 공개적으로 문서화된 Vue 2 API와 동작만을 포함하는 것을 목표로 한다. 공식적인 동작 외에 커스텀한 경우에 일일히 모든 케이스에 마이그레이션 빌드를 수정할 수 없으므로, 마이그레이션 빌드를 사용하여 버그가 나는 경우에 리펙토링을 해야한다.
2021년 3분기 후반에 릴리즈할 예정인 Vue 2.7버전에서 Composition API 및 기타 Vue 3 기능을 백포트할 것이다.
마이그레이션 빌드는 3.1 버전부터 제공된다. 2021년 후반까지만 마이너 버전으로 마이그레이션 빌드를 제공할 것이며, 그 때까지 개발자는 Vue 3의 표준 빌드로 전환하는 것을 목표로 해야 한다.

어떻게 업그레이드할까?

deprecated된 named / scoped slot 문법을 최신 문법으로 변경한다. (2.6 버전에서 이미 지원함)
package 버전 업데이트

커스텀 웹팩 환경인 경우 vue-loader를 ^16.0.0으로 업그레이드
vue-cli 환경인 경우 @vue/cli-service를 업그레이드

vue 버전

package.json에서 vue를 3.1로 업데이트하고 동일한 @vue/compat을 설치
vue-template-compiler가 있는 경우 @vue/compiler-sfc를 3.1로 변경하여 설치

"dependencies": {
-  "vue": "^2.6.12",
+  "vue": "^3.1.0-0",
+  "@vue/compat": "^3.1.0-0"
  ...
},
"devDependencies": {
-  "vue-template-compiler": "^2.6.12"
+  "@vue/compiler-sfc": "^3.1.0-0"
}

빌드 설정에서 vue를 @vue/compat으로 별칭을 지정하고, Vue 컴파일러 옵션을 통해 호환 모드를 활성화한다. vue-cli

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('vue', '@vue/compat')
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      })
}

일반적인 webpack

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      vue: '@vue/compat'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      }
    ]
  }
}