Vue CLI의 Babel 플러그인을 최신 버전으로 업그레이드하기 // A Better Tomorrow

Vue CLI는 Vue 2를 위한 도구입니다.
본 포스팅은 Vue 2 기반의 프로젝트에서 진행한 내용임을 알려드립니다.

Vue.js는 @vue/cli-plugin-babel을 코어 플러그인으로 사용합니다.
Vue.js 코드를 브라우저가 이해할 수 있는 JavaScript 코드로 트랜스파일하기 위해 Babel을 활용하죠.

참고로 저는 프로젝트 코드에서 옵셔널 체이닝(Optional chaining)을 사용하기 위해 관련 내용을 알아보기 시작했어요.
만약 저와 같은 목적을 갖고 계시면서 사이드 이펙트 걱정이 크신 분이시라면 공식 문서에서 안내하는 대로 필요한 의존성만 추가해줘도 괜찮습니다.
하지만 해당 플러그인을 포함하는 버전으로 업그레이드해 넓은 범위의 해결을 추구하는 것이 좋지 않을까하는 개인적인 의견을 덧붙이며, 시작하겠습니다.

Optional Chaining을 지원하는 Babel 버전

옵셔널 체이닝을 지원하는 바벨의 플러그인은 @babel/plugin-proposal-optional-chaining이고 v7.8.0 이상의 @babel/preset-env에서 지원합니다.
릴리즈 노트에 따르면 v4.5.19 이상의 vue-cli부터 에러 없이 사용할 수 있어 보여요.
좀 더 최신 버전이 있는지 확인해봤어요.

Latest 버전 확인하기

yarn outdated

Package                Current Wanted Latest Package Type    URL
@vue/cli-plugin-babel  3.12.1  3.12.1 5.0.8  devDependencies https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-babel#readme
@vue/cli-plugin-eslint 3.12.1  3.12.1 5.0.8  devDependencies https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-eslint#readme
@vue/cli-service       3.12.1  3.12.1 5.0.8  devDependencies https://cli.vuejs.org/

Vue 2에서 지원하는 Babel 플러그인의 latest 버전은 5.0.8입니다.
yarn outdated 명령으로 확인하거나 npm 홈페이지에서 확인할 수 있습니다.
Vue 3에서 Vue CLI 대신 Vite를 사용하기를 추천한 걸 보면, 더 이상 새로운 릴리즈가 이루어지진 않을 것 같네요.

Latest 버전으로 업그레이드하기

yarn upgrade 명령에 -L, --latest 옵션을 주면 캐럿, 틸드 등 package.json 파일에 적힌 범위를 무시하고 최신 버전으로 업그레이드할 수 있어요. (참고: 명시적으로 업그레이드 범위를 지정하는 옵션)
Major 버전까지 가장 최신으로 업그레이드하기 위해 -L 옵션을 주고 ESLint 플러그인과 CLI Service 버전도 함께 올려주었습니다.

yarn upgrade @vue/cli-plugin-babel -L
yarn upgrade @vue/cli-plugin-eslint -L
yarn upgrade @vue/cli-service -L

{
  "devDependencies": {
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-service": "^5.0.8"
  }
}

Polyfill 주입이 필요한 경우

제가 유지보수하는 프로젝트는 폴리필을 주입하기 위해 babel-polyfill 라이브러리를 사용하고 있었어요.
babel-polyfill 라이브러리는 Babel v7.4부터 deprecated 패키지라서 대체해 주어야 했기 때문에 아래 과정을 추가로 진행했습니다.

Babel Loader 구성

Webpack이 번들링할 때 Babel Loader가 전처리할 수 있도록 Webpack 공식 문서를 참고해 로더를 구성했어요.

// webpack.config.js

module.exports = {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-env", { useBuiltIns: "usage", corejs: "3" }],
          ],
        },
      },
    },
  ],
  // ...
};

useBuiltIns, corejs 옵션을 간단히 설명하자면,

useBuiltIns: 폴리필을 주입할 방식을 정의해요. (예시 값: "usage", "entry", false)
- "usage": 각 파일에서 사용하는 특정 폴리필을 주입합니다.
corejs: 사용할 core-js의 버전을 정의해요. Minor 버전도 지정할 수 있습니다. (예시 값: "2", "3" 등)

좀 더 다양한 옵션과 자세한 설명은 공식 문서를 참고해주세요.

Third-party 라이브러리

Babel은 기본적으로 node_modules/ 경로의 파일을 처리하지 않는다고 해요.
폴리필 주입이 필요한 third-party 라이브러리가 있다면 아래와 같이 트랜스파일할 라이브러리를 적어 주시면 됩니다.

// vue.config.js

module.exports = {
  transpileDependencies: ["vuetify", "ant-design-vue"],
  // ...
};

옵션에 대한 좀 더 자세한 설명은 Vue CLI 공식 문서를 참고해주세요.