Babel은 ES6+ 코드를 ES5 이하의 버전으로 트랜스파일링한다.
[1, 2, 3].map(n => n ** n);위 코드는 ES6에서 도입된 arrow 함수와 ES7에서 도입된 거듭제곱연산자를 사용하고 있다. 이 두가지 기능은 IE는 물론 구형 브라우저에서 지원하지 않는다. 따라서 IE나 구형 브라우저에서도 동작하는 애플리케이션을 구현하기 위해 ES6+ 코드를 ES5 이하의 버전으로 변환(트랜스파일링)할 필요가 있다.
Babel을 사용하면 위 코드를 ES5이하의 버전으로 트랜스 파일링할 수 있다.
// ES5
"use strict";
[1, 2, 3].map(function (n) {
return Math.pow(n, n);
});
Babel CLI설치
1. npm을 사용하여 Babel CLI를 설치
1) 프롬프트를 통해 설치하고자하는 디렉토리 접근
2) npm init -y
3) npm install --save-dev @babel/core @babel/cli
package.json을 확인해보면 @babel/core @babel/cli이 추가된걸 확인할 수 있다.
2. Babel을 사용하려면 먼저 @babel/preset-env을 설치
@babel/preset-env란 Babel플러그인을 모아둔 것으로 Babel프리셋이라고 부르며 공식 프리셋은 다음과 같다.
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/preset-typescript
@babel/preset-env도 공식프리셋의 하나이며 필요한 플러그인들을 프로젝트 지원환경에 맞춰서 동적으로 결정해준다.
프로젝트 지원 환경은 Browserslist형식으로 .browserslistrc 파일에 상세히 설정할 수 있다. 프로젝트 지원 환경 설정 작업을 생략하면 기본값으로 설정된다.
설치 방법은 아래와 같다.
-> npm install --save-dev @babel/preset-env
설치가 완료된 후 package.json의 모습은 다음과 같다.
설치가 완료되었으면 프로젝트 루트에 .babelrc파일을 생성하고 아래와 같이 작성한다. 지금 설치한 @babel/preset-env를 사용하겠다는 의미이다.
{
"presets": ["@babel/preset-env"]
}
3. 트랜스파일링
Babel을 사용하여 ES6+ 코드를 ES5 이하의 코드로 트랜스파일링하기 위해 Babel CLI명령을 사용할 수 있으나 npm script를 사용하여 트랜스파일링 하는 방법에 대해 알아보도록 하자
package.json 파일에 scripts를 추가한다. 완성된 package.json파일은 다음과 같다.
위 npm scripts는 src/js폴더에 있는 모든 ES6+ 파일들을 트랜스파일링한 후, 그 결과물을 dist/js폴더에 저장한다.
사용한 옵션의 의미는 아래와 같다.
-w
: 타깃 폴더에 있는 모든 파일들의 변경을 감지하여 자동으로 트랜스파일한다. (--watch옵션의 축약형)
-d
: 트랜스 파일링된 결과물이 저장될 폴더를 지정한다. (--out-dir 옵션의 축약형)
이제 트랜스 파일링을 테스트하기 위해 ES파일을 작성해 보자. 프로젝트 루트에 src/js폴더를 생성한 후 main.js와 lib.js를 추가한다.
/src/js/main.js
import { pi, power, Foo } from './lib.js';
console.log(pi);
console.log(power(pi, pi));
const f = new Foo();
console.log(f.foo());
console.log(f.bar());
/src/js/lib.js
export const pi = Math.PI;
export function power(x, y){
return x ** y;
}
export class Foo{
#private = 10;
foo(){
const {a, b, ... x} = {...{a:1, b:2}, c:3, d:4};
return {a,b,x};
}
bar(){
return this.#private;
}
}그럼 루트에서 아래 명령으로 트랜스파일링을 실행한다.
-> npm run build
@babel/preset-env는 현재 제안 단계에 있는 사양에 대한 플러그인을 지원하지 않기 떄문에 발생한 에러이다. 현재 제안 단계에 있는 사양을 지원하려면 플러그인을 설치해야한다.
4. Babel 플러그인
설치가 필요한 플러그인은 Babel 홈페이지에서 검색할 수 있다. 상단 메뉴의 Search에 프로포절의 이름을 입력하면 플러그인을 검색할 수있다. 홈페이지 : https://babeljs.io/
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
-> npm install --save-dev @babel/plugin-proposal-class-properties
위 명령을 통해 플러그인을 설치한다. 설치 이후 package.json은 다음과 같다.
설치한 플러그인은 .babelrc파일에 추가해 주어야한다.
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}다시 터미널에서 아래 명령으로 트랜스 파일링을 실행
-> npm run build
트랜스 파일링에 성공하면 프로젝트 루트에 dist/js 폴더가 자동 생성되고 트랜스 파일링된 main.js와 lib.js가 저장된다.
트랜스 파일링된 main.js를 실행하여 보자. 결과는 다음과 같다.
5. 브라우저에서 모듈 로딩 테스트
위에서 테스트한 것은 node.js가 기본 지원하는 commonJS방식의 module loading system에 따른 것이다.
브라우저는 commonJS방식의 module loading system을 지원하지 않으므로 위에서 트랜스파일링된 결과를 그대로 실행하면 에러가 발생한다
트랜스 파일링된 자바스크립트 파일을 브라우저에서 실행해보자
크롬 브라우저로 실행하였으며 개발도구를 통해 에러가 발생한 것을 확인할 수가 있다.
브라우저의 ES6모듈 기능을 사용하여 Babel을 설정할 수도 있으나 앞서 설명한 바와 같이 브라우저의 ES6 모듈기능을 사용하는 것은 문제가 있다. 다음 글에서는 webpack을 통해 이러한 문제를 해결해볼려고 한다.