Babel 이란?

Yooncastle·2022년 10월 3일

크로스 브라우징 이슈를 해결하기 위해 생겨난 툴

크로스 브라우징이란?

Cross Browsing
크로스 브라우징은 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많은데, 이러한 차이를 최소화 하여 브라우저, 환경에 영향을 최소한으로 받고 해당 웹 서비스를 사용할 수 있게 최적화를 하는 작업

Babel의 역할

ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다. 바벨은 이렇게 추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러의 역할

Babel 빌드 과정

파싱(Parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
변환(Transforming) : 추상 구문 트리를 변경
출력(Printing) : 변경된 결과물을 출력

파싱과 출력: Babel 담당
변환: Plugin 담당

Babel Plugin 이란?

바벨이 어떤 코드를 어떻게 변환할 지에 대한 규칙

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

Babel Preset이란?

위 Plugin들을 매번 일일이 설정하는건 번거러움
따라서 Preset으로 필요한 플러그인들을 목적에 따라 묶어둠

바벨 7 이전에는 연도별 프리셋을 제공했지만 이후 버전에서는 env 하나로 합쳐져서 무척 편리하게 사용할 수 있게 됨

대표적인 프리셋으로 ES6+를 변환하는 프리셋인 preset-env

module.exports = {
  presets: [
    '@babel/preset-env'
  ]
}

Polyfill 이란?

최신 ECMAScript 환경을 만들기 위해 코드가 실행되는 환경에 존재하지 않는 빌트인, 메소드 등을 추가하는 역할

ES6에서 비동기 처리를 위해 등장한 Promise 객체는 env 프리셋을 가지고 변환을 하려고 해도 ie에서 인식하지 못함

바벨의 경우는 ES6+를 ES5로 변환할 수 있는 것들만 변환을 하는데, Promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우는 에러가 발생

이러한 경우 우리는 폴리필을 통해서 이슈를 해결 Promise를 ES5로 변환할 수는 없지만 ES5 방식으로 구현하여 해결

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

Babel-loader 란?

실무에서는 바벨을 직접 사용하는 경우보다는 Webpack으로 통합해서 사용하는 경우가 더 많음

이 때 로더 형태로 제공되는 'babel-loader'를 사용

'babel-loader'를 설치하고 웹팩 설정 파일을 다음과 같이 작성\
모든 js 파일을 바벨로 처리할 수 있게 했고, node_modules는 양이 많고 굳이 처리할 필요가 없기 때문에 제외

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