babel 이해하기

babel?

자바스크립트의 최신 문법으로 코드를 작성하더라도, 일부 브라우저에서는 js의 최신 문법을 지원하지 않을 수 있다. 모든 환경에서 내가 작성한 코드가 동작하도록 하려면 처음부터 보수적으로 코드를 작성하거나 이전 버전으로 변환해야 하지만 쉽지 않은 일이다. 이러한 변환 과정을 compile(transpile)이라고 한다.
(compile과 transpile을 혼용해서 쓰지만 compile이 더 큰 범주이므로 compile 과정이라고 넓게 표현한다.)

굳이 범주를 나눠보자면,

• compile : 특정 언어로 작성된 코드를 다른 코드로 변환하는 과정 (c => assembly 등)
• transpile : 특정 언어로 작성된 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 과정 (es6 => es5, c++ => c 등)

어쨌든 이를 쉽게 해주는 게 babel이다.

babel은 ECMAScript 2015+로 작성된 자바스크립트 코드를 이전 버전 코드로 변환해주는 toolchain(javascript transpiler)이다.

// 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;
});

요약하자면
babel은 js 컴파일러이며, 새로운 ES 문법을 지원하지 않는 브라우저에서도 사용할 수 있게 언어 차원의 변환 기능을 제공하는 도구이다.

babel은 모듈 번들러가 아니다. 그렇기에 보통 webpack과 같은 모듈 번들러를 사용해 빌드 시스템을 구축한 후, babel 컴파일러를 로더로 함께 사용한다.

기본 usage 뜯어보기

1. 아래 명령을 통해 패키지를 설치한다.

npm install --save-dev @babel/core @babel/cli @babel/preset-env

⇒ babel의 핵심 기능은 @babel/core 모듈에 있다.
⇒ @babel/cli는 터미널에서 babel을 사용할 수 있게 해주는 도구이다. 이게 있어야 3번 명령을 실행할 수 있다.
⇒ 변환은 플러그인 형태로 수행된다. 자신만의 방법대로 하나하나 커스텀할 수도 있고(plugin), 플러그인들을 집합 형태로 변환을 할 수도 있다(preset).

예를 들어, 아래 명령어를 입력하면

npm install --save-dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

아래와 같이 화삼표 함수가 ES5 함수 표현식으로 변환된다.

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

여러 개의 플러그인을 조합해 놓은게 preset이다. 가장 많이 사용되는 데 env이다. 아래와 같이 터미널에 입력하면 된다.

npm install --save-dev @babel/preset-env

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

babel은 typescript나 JSX로 작성된 코드를 변환할 때도 사용된다.
⇒ react preset : npm install --save-dev @babel/preset-react
⇒ flow preset : npm install --save-dev @babel/preset-flow
⇒ typescript preset : npm install --save-dev @babel/preset-typescript

2. 아래 내용을 갖는 babel.config.json 파일을 프로젝트 루트 경로에 생성한다.(아래 브라우저 목록은 예시일 뿐 자세한 건 @babel/preset-env 참고) v.7.8.0 이상

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

older babel version을 사용하면 const 변수명= 으로 묶어서 module.exports = { 변수명 };으로 내보내야 한다.

3. 그리고 나서 내가 작성한 모든 코드들을 src 디렉토리에서 lib로 컴파일하기 위해 아래 명령어를 터미널에 입력한다.

./node_modules/.bin/babel src --out-dir lib

실제 babel cli 구성해보기

1. 아래 명령어를 통해 프로젝트 초기화 한 후

mkdir <프로젝트> && cd $_
npm init -y
git init

2. 아래 명령어를 터미널에 입력해 babel cli 설치한다. (-D를 넣어 프로젝트 단위로 로컬 설치를 하는 게 권장된다. 프로젝트마다 다른 버전의 babel cli를 사용할 수 있고, 암시적인 종속성이 없어 프로젝트를 이식하기도 용이하기 때문이다)

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

3. package.json 스크립트 항목에 compile 명령을 추가한다. 아래 명령은 src 디렉토리의 js파일을 컴파일해서 dist 디렉토리에 결과를 저장하도록 하는 것이다. 그리고 start 명령을 추가해 compile을 실행하도록 설정한다.

{
  "scripts": {
    "start": "npm run compile",
    "compile": "babel src -d dist"
  }
}

이러면 등록한 start 명령을 실행하면 babel에 의해 js코드가 컴파일된다.

npm start # npm run compile 명령 실행

컴파일된 결과는 dist 디렉토리 안에 출력된다.

.
├── dist/ # 컴파일 출력 코드
│   ├── ellipseText.js
│   └── index.js
│
└── src/ # 원본 소스 코드
    ├── ellipseText.js
    └── index.js

4. babel 구성(env 사전 설정). babel은 사전 설정(presets)이 없으면 그 어느 것도 컴파일하지 않는다.
   아래 명령어를 통해 @babel/preset-env 사전 설정 패키지를 설치한다.

npm i -D @babel/preset-env

babel.config.json 파일을 프로젝트 루트에 만든 후 사전 설정을 추가한다.

{
  "presets": ["@babel/preset-env"]
}

하지만 이렇게만 하면 ES 모듈 코드를 CommonJS 모듈 방식을 사용하므로 아래와 같이 수정해준다.

{
  "presets": [
    [
      "@babel/preset-env",
      { "modules": false }
    ]
  ]
}

참고

BABEL : Usage Guide
ETC - transpile (트랜스파일) 과 compile (컴파일) 의 비교
Babel CLI 구성