Babel 7 마이그레이션 과정에서 겪은 preset 문제

문제 상황

회사 프로젝트의 Babel을 6에서 7로 업그레이드하는 작업을 진행했다. 공식 문서를 보고 패키지를 업데이트했는데 빌드가 실패했다.

Error: Cannot find module 'babel-preset-env'

원인

Babel 7부터 모든 공식 패키지가 @babel 스코프로 변경되었다. 기존에 babel-preset-env였던 것이 @babel/preset-env로 바뀌면서 .babelrc 설정도 함께 수정해야 했다.

해결 과정

먼저 패키지를 모두 새 네이밍으로 교체했다.

npm uninstall babel-preset-env babel-preset-react babel-preset-stage-2
npm install --save-dev @babel/preset-env @babel/preset-react

.babelrc 파일도 수정했다.

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

stage preset은 Babel 7에서 공식적으로 제거되어 필요한 plugin만 개별 설치했다.

추가 작업

Webpack 설정에서 babel-loader를 사용 중이었는데, 이것도 버전을 8로 올려야 Babel 7과 호환됐다. 그냥 넘어갔다가 런타임 에러를 만났다.

npm install --save-dev babel-loader@8

전체 마이그레이션에 반나절 정도 소요됐다. 빌드 속도는 체감상 약간 빨라진 것 같다.