Vue2 + TypeScript - Babel

Babel

🔍 바벨(Babel)이란?

Babel is a JavaScript compiler.

• ES6 이상의 자바스크립트나 타입스크립트, JSX 등을 현재 및 이전 브라우저 또는 환경에서 동작할 수 있도록 이전 버전의 자바스크립트 코드로 변환해 주는 트랜스파일러이다.

• 필요 항목
  • @babel/core
    • babel의 핵심 기능인 컴파일러 코어
  • @babel/cli
    • 터미널에서 babel을 사용할 수 있게 해주는 도구
  • plugin
    • babel에 코드 변환을 수행하는 방법을 지시하는 작은 JavaScript 프로그램
  • preset
    • plugin들을 모아놓은 집합
      • 공식 preset
        • @babel/preset-env
        • @babel/preset-flow
        • @babel/preset-react
        • @babel/preset-typescript
  • polyfill
    • 브라우저에서 지원하지 않는 기능을 사용할 수 있게 호환해주는 코드 조각

🔍 바벨(Babel) 설치 - Vue Cli

• babel 설치

vue add babel

// 타입스크립트 변환을 위한 preset 설치
npm install --save-dev @babel/preset-typescript

• 기본 적용 사항
  • babel 7
  • babel-loader
  • @vue/babel-preset-app
    • @babel/preset-env를 포함
  • core-js
  • babel.config.js

    • module.exports = {
       	presets: [
          	'@vue/cli-plugin-babel/preset',
              // @babel/preset-typescript 별도 추가 필요
              '@babel/preset-typescript'
       	]
       }

🔍 바벨(Babel) 설치 - npm

• babel 설치

// babel core와 cli 설치
npm install --save-dev @babel/core @babel/cli

// ES5+와 타입스크립트 변환을 위한 preset 설치
npm install --save-dev @babel/preset-env @babel/preset-typescript

// babel 7.4부터 @babel/polyfill은 deprecated 됐으므로 core-js@3 설치
npm install core-js@3

// core-js@3와 @babel/runtime 사용을 위한 플러그인 추가 설치
npm install --save-dev @babel/plugin-transform-runtime
npm install @babel/runtime-corejs3

// loader 설치
npm install --save-dev babel-loader

• babel.config.json 파일 생성

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        // preset의 polyfill 삽입 방식 설정 옵션
        "useBuiltIns": "usage",
        // 삽입되는 core-js 버전 설정
        "corejs": "3.21.1"
      }
    ],
    [
      "@babel/preset-typescript"
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}