Babel이란?
Babel은 자바스크립트 컴파일러로서, 최신의 자바스크립트 코드를 이전 단계의 자바스크립트 코드로 변환 가능하게 해주는 개발 도구, 즉 트랜스파일러(Transpiler)이다.
이와 같은 트랜스파일러(Transpiler)가 필요한 이유는, ES6+를 사용하여 프로젝트를 진행하려면 ES6+로 작성된 코드를 IE를 포함하여 모든 브라우저에서 문제 없이 작동할 수 있는 코드로 변환해야 하기 때문이다.
즉, Babel 패키지를 활용하면 자바스크립트 최신 문법으로 자유롭게 코딩하면, 그것과 웹브라우저간의 호환을 Babel 패키지가 책임져준다.
아래 예제는 ES6의 화살표 함수와 ES7의 지수 연산자를 사용하고 있다.
// ES6 화살표 함수와 ES7 지수 연산자
[object_name].map(n => n ** n);
IE와 다른 구형 브라우저에서는 이 두 가지 기능을 지원하지 않을 수 있다. Babel을 사용하면 위 코드를 아래와 같이 ES5 이하의 버전으로 변환할 수 있다.
// ES5
"use strict";
[object_name].map(function (n) {
return Math.pow(n, n);
});
이처럼 Babel는 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다. Babel을 사용하기 위한 환경을 구축해 보자.
1. Babel CLI 설치
npm을 사용하여 Babel CLI을 설치한다. 프로젝트에 따라 설정이 다를 수 있으므로 전역이 아닌 로컬로 설치한다.
$ npm install --save-dev @babel/core @babel/cli
2. babelrc 설정 파일 작성
Babel을 사용하려면 @babel/preset-env을 설치해야 한다. @babel/preset-env은 함께 사용되어야 하는 Babel 플러그인을 모아 둔 것으로 Babel 프리셋이라고 부른다. Babel이 제공하는 공식 Babel 프리셋(Official Preset)은 아래와 같다.
@babel/preset-env도 공식 프리셋의 하나이며 필요한 플러그인 들을 프로젝트 지원 환경에 맞춰서 동적으로 결정해 준다. 프로젝트 지원 환경은 Browserslist 형식으로 .browserslistrc 파일에 상세히 설정할 수 있다. 프로젝트 지원 환경 설정 작업을 생략하면 기본 값으로 설정된다.
일단은 기본 설정으로 진행하도록 하자. 기본 설정은 모든 ES6+ 코드를 변환한다.
# env preset 설치
$ npm install --save-dev @babel/preset-env
설치가 완료되었으면 프로젝트 루트에 .babelrc 파일을 생성하고 아래와 같이 작성한다. 지금 설치한 @babel/preset-env를 사용하겠다는 의미이다.
{
"presets": ["@babel/preset-env"]
}
3. 트랜스파일링
Babel을 사용하여 ES6+ 코드를 ES5 이하의 코드로 트랜스파일링하기 위해 Babel CLI 명령어를 사용할 수도 있으나 npm script를 사용하여 트랜스파일링하는 방법에 대해 알아보도록 하자.
package.json 파일에 scripts를 추가한다. 완성된 package.json 파일은 아래와 같다.
{
"name": "es6-project",
"version": "1.0.0",
"scripts": {
"build": "babel src/js -w -d dist/js"
},
"devDependencies": {
"@babel/cli": "^7.7.0",
"@babel/core": "^7.7.2",
"@babel/preset-env": "^7.7.1"
}
}
위 npm script는 src/js 폴더(타깃 폴더)에 있는 모든 ES6+ 파일들을 트랜스파일링한 후, 그 결과물을 dist/js 폴더에 저장한다. 사용한 옵션의 의미는 아래와 같다.
-w : 타깃 폴더에 있는 모든 파일들의 변경을 감지하여 자동으로 트랜스파일한다. (--watch 옵션의 축약형)
-d : 트랜스파일링된 결과물이 저장될 폴더를 지정한다. (--out-dir 옵션의 축약형)