[Babel] Babel

Babel은 JavaScript 컴파일러입니다.

바벨은 ECMAScript 2015+로 작성한 코드를 구버전의 자바스크립트 파일로 변환해줌으로 모든 브라우져에서 동작하도록 호환성을 지켜준다. 또한 타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함한다.

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

기본 동작

바벨은 세 단계로 빌드를 진행한다.
1. 파싱(Parsing) - 코드를 읽고 추상 구문 트리(AST)로 변환
2. 변환(Transforming) - 추상 구문 트리 변경
3. 출력 (Printing) - 변경된 결과물을 출력

바벨은 파싱과 출력만 담당하고 변환 작업은 "플러그인"이 처리함으로 플러그인을 설치한다.

사용 방법

설치

npm i -D @babel/core @babel/cli @babel/preset-env
npm i  @babel/polyfill

babel-cli
가장 많이 쓰이는 형태
babel src -d dest --compact=true --source-maps

• --presets=env: .babelrc,babel.config.js에 설정하여 생략 가능
• -o [dest파일명]: 변환 후 dest파일명으로 저장
• -w: 실시간 변경 반영(-o [dest파일명]와 함께 사용)
• -d[dest폴더명]: 변환 후 dest폴더명으로 저장
• --compact=true: 코드 압축(공백, 줄바꿈이 제거되어 한줄로 나옴)
• --source-maps: --compact=true사용시 디버깅(개발자도구)이 어려움으로 원본 파일에 오류가 나타나도록 매핑

프리셋

바벨을 사용할때 플러그인을 일일이 설정하는 것은 힘들다. 그래서 목적에 맞게 여러가지 플러그인을 세트로 모아놓은 것을 "프리셋"이라고 한다.

preset-env는 ECMAScript2015+를 변환할 때 사용한다. 이전에는 연도별로 각 프리셋이 있었으나 지금은 preset-env로 통일됬다.

폴리필

바벨은 ECMAScript2015+를 ECMAScript5 버전으로 변환할 수 있는 것만 빌드한다. 그렇지 못한 것들은 "폴리필"이라고 부르는 코드조각을 추가해서 해결한다.(ex, Promise 객체)

babel.config.js 설정

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

useBuiltIns(폴리필 동작 방식) - usage, entry, false(디폴트)
usage나 entry를 설정하면 폴리필 패키지 중 core-js를 모듈로 가져온다

웹팩으로 통합

실무 환경에서는 바벨을 직접 사용하는 것보다는 웹팩으로 통합해서 사용하는 것이 일반적이다. babel-loader가 로더 형태로 제공한다.

npm install -D babel-loader

웹팩 설정에 로더를 추가

// webpack.config.js:
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // .js확장자로 끝나는 파일을 처리
        exclude: /node_modules/,
        loader: "babel-loader", // 바벨 로더를 추가한다
      },
    ],
  },
}

폴리필 사용 설정을 했다면 core-js도 설치해야한다. 웹팩은 바벨 로더가 만든 아래 코드를 만나면 core-js를 찾을 것이기 때문이다.

require("core-js/modules/es6.promise")
require("core-js/modules/es6.object.to-string")

minify 코드 압축
배포전 코드 압축을 하기 위해 minify 패키지를 설치.

npm install --save-dev babel-preset-minify

babel.config.js 파일 수정

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

npm run build 수행 시 "Couldn't find intersection" 에러가 날 경우,
babel.config.js 파일을 아래와 같이 수정

 module.exports = {
    "presets": [
	"es2015",
	["minify", {builtIns: false, evaluate: false, mangle: false}]
	]
}

정리

바벨 : 다양한 브라우져에서 돌아가는 어플리케이션을 만들기 위한 도구
바벨 코어 - 파싱, 출력 / 플러그인 - 변환
프리셋 : 여러 개의 플러그인들을 모아 놓은 세트 ECMAScript+ 환경은 env 프리셋을 사용
플로필 : 바벨이 변환하지 못한 코드를 변환해 주는 코드 조각
babel-loader로 웹팩으로 통합해서 사용하는 것이 일반적