Babel이란?

바벨은 크로스 브라우징을 도와주는 트랜스파일러입니다.
최신문법은 매년나오지만 브라우저마다 이를 반영하는 속도는 제각각이죠.
크로스 브라우징을 달성하면서 최신 문법으로 개발할 수 있습니다.

설치

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

바벨의 순서

바벨의 빌드과정은 3단계입니다.
1. 파싱 - 코드를 읽고 추상구문트리로 변환
2. 변환 - 추상구문트리를 변경. 적정한 수준의 크로스브라우징 가능한 코드로 변경하는 단계.
3. 출력 - 변경된 결과물을 출력

플러그인

바벨은 파싱과 출력만 담당하고, 변환은 플러그인을 통해서 작업합니다.
플러그인은 visitor객체를 가진 함수를 반환하면 됩니다.

// myplugin.js:
module.exports = function myplugin() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;

        // 바벨이 만든 AST 노드를 출력한다
        console.log('Identifier() name:', name) 
        
        // 변환작업: 코드 문자열을 역순으로 변환한다
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      }
    },
  };
}

터미널에서 아래와 같이 작성하여 실행시킬 수도 있지만 연결할 플러그인이 한 두개가 아닌데 매번 이렇게 쓰기 힘들겠죠.
따라서 뒤에 나오는 과정들은 babel.config.js 파일을 루트경로에 만든 후, 작성합니다.

$ npx babel <fileName> --plugins <pluginNameSource>

프리셋

플러그인의 묶음입니다.

// babel.config.js
module.exports = {
  presets: [
    './mypreset.js'
  ],
}

// mypreset.js
module.exports = function mypreset() {
  return {
    plugins: [
      "@babel/plugin-transform-arrow-functions",
      "@babel/plugin-transform-block-scoping",
      "@babel/plugin-transform-strict-mode",
    ],
  }
}

바벨이 제공하는 여러 프리셋 중 env를 보면,

$ npm install -D @babel/preset-env

위와 같이 설치하고 target옵션으로 브라우저 버전명을 적어주면 편리하게 바뀝니다.

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

폴리필

프리셋이나 플러그인은 ecmaScript5버전으로 변환할 수 있는 것만 빌드합니다. 5버전에 존재하지도 않았던 것을 바꿀 수는 없습니다. 이럴떄는 대체품을 만들어놓은 폴리필을 추가해서 해결해야 합니다.

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

useBuiltIns는 폴리필을 어떤 방식으로 사용할 지 설정합니다. 'usage, 'entry', false
false가 아니면 폴리필 패키지 중 core-js를 모듈로 가져옵니다.
core-js를 사용하기 위해 설치도 해줍니다.

$ npm i core-js@2

웹팩으로 통합

로더로 연결합니다.

$ npm install -D babel-loader

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