바벨

크로스 브라우징

브라우저마다 사용하는 언어 스펙이 달라 코드를 읽지 못하는 경우가 발생한다.
자바스크립트의 경우, IE 에서 프라미스를 이해하지 못하는데 이를 해결해줄 수 있는 것이 바벨이다.
es6 이상의 언어로 작성된 코드를 바벨을 이용한 트랜스파일링 작업을 하여 모든 브라우저에서 호환가능하도록 한다.

바벨 설치

npm install @babel/core @babel/cli

// 실행
npx babel app.js

프리셋

바벨에는 여러가지 플러그인이 있는데, block-scoping, arrow-functions 등등 이 있다. 이러한 것들을 하나씩 다운받기는
우리는 너무 너무 귀찮다. 그러니까 이러한 플러그인이 모아져 있는 프리셋을 사용하자 ^.^~~

preset-env 는 es6 를 변환할 때 사용한다. 바벨 7 이전에는 연도별로 프리셋을 제공했지만, 7 이후로는 env 하나로 합쳐짐.

npm install @babel/preset-env

또한, 아래와 같이 targets 를 사용해서 브라우저 버전을 지정할 수 있음.

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          chrome: "79", // 크롬 79까지 지원하는 코드를 만든다
          ie: "11" // ie 11까지 지원하는 코드를 만듬.
        },
      },
    ],
  ],
}

폴리필

프라미스는 env 프리셋으로 변환할 수 없다. 이를 변환하기 위해서는 폴리필을 사용해주어야 한다.

npm install core-js

// babel.config.js:
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage", // 폴리필 사용 방식 지정
        corejs: {
          // 폴리필 버전 지정
          version: 2,
        },
      },
    ],
  ],
}

웹팩으로 통합

위의 과정을 가지고 이제 웹팩으로 통합해서 사용하자.
babel-loader 를 설치해주자. 이를 이용해서 로더 형태로 제공할 수 있다.

npm install babel-loader

// webpack.config.js:
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader", // 바벨 로더를 추가한다
      },
    ],
  },
}

babel-loader 를 이용하여 웹팩과 함께 사용하면 훨씬 단순하고 자동화된 프론트엔드 개발환경을 갖출 수 있다.