[Babel] Babel 설정 파일 작성부터 Polyfill 까지 알아보자!

트랜스파일을 위한 도구인 Babel에 대한 실습을 진행해보자!

Babel 설치

npm install -D @babel/cli @babel/core @babel/preset-env

• 개발 환경에서만 필요하므로, devDependencies에 설치 될 수 있도록 -D 옵션을 붙여준다.

• 바벨 cli 명령어와 프리셋 관련된 것들을 한번에 설치해주었다.

Babel 설정 파일 작성

• 프로젝트 전체에 적용되도록 babel.config.json 파일에 작성해준다. (.babelrc는 현재 위치한 폴더에만 적용됌)

  {
    "presets": [
      [
        "@babel/preset-env"
      ]
    ],
    // 실제 트랜스파일 시 사용되는 플러그인들
    "plugins": ["@babel/plugin-proposal-class-properties"] 
  }

• 위에서 설치한 preset을 사용한다는 의미이다.

• 바벨 자체는 plugin 이나 preset을 설정해주지 않으면 아무런 동작을 하지 않기 때문에, 트랜스파일을 위해서는 작성해줘야하는 부분이다.

Babel & Polyfill

• Polyfill은 트랜스파일만으로 해결할 수 없는 명세를 구현한 것인데,

• 좀 더 쉽게 말하자면, 구형 브라우저 (IE 같은) 에서 지원하지 않는 문법들을 런타임 시에 주입해서 해당 문법이 구현된 것처럼 사용하는 것을 말한다.

• Polyfill 코드 주입하기 위해서는 별도의 패키지 설치가 필요하다.

Polyfill 패키지 설치

• Promise Polyfill 주입을 위한 core-js 설치

  npm install core-js

• fetch API Polyfill 주입을 위한 whatwg-fetch 설치

  npm install whatwg-fetch

설치 후 babel 설정 파일 수정

{
  "presets": [
    [
      "@babel/preset-env",
      {
        // core-js 폴리필 사용을 위한 useBuiltIns, corejs 옵션 추가
        "useBuiltIns": "usage", // 파일에 필요한 폴리필 자동 주입
        "corejs": 3 // 패키지 버전
      }
    ]
  ],
  // 실제 트랜스파일 시 사용되는 플러그인들
  "plugins": ["@babel/plugin-proposal-class-properties"] 
}

fetch API 사용 중인 파일 내 import

import { fetch } from 'whatwg-fetch';

트랜스파일 진행

• 커스텀 명령어 작성

  // package.json
  
  "scripts": {
    "transpile": "babel src/javascript -d transpile"
  }

  npm run transpile

• 트랜스파일 결과
  

  • transpile 이라는 폴더 밑에 트랜스파일된 자바스크립트 파일들이 생성되는 것을 확인할 수 있다.

다음에는 이어서 webpack을 이용해 Babel 트랜스파일을 진행하는 과정에 대해 알아보겠다!