ES6 화살표 함수, ES7 지수 연산자 ⇒ ES5이하의 버전으로 변환시켜 준다.
[1, 2, 3].map(n => n ** n);
[1, 2, 3].map(function (n) {
return Math.pow(n, n);
});
Babel CLI, Preset 설치
yarn init
yarn add -D @babel/core @babel/cli
yarn add -D @babel/preset-env
루트에 .babelrc 파일 생성
{
"presets": ["@babel/preset-env"]
}
공식 프리셋
플러그인 들을 프로젝트 지원 환경에 맞춰서 동적으로 결정한다.
.browserslistrc 파일에 상세히 설정할 수 있다.
트랜스파일링하는 방법
package.json
"scripts": {
"build": "babel src -w -d dist"
},
src 폴더(타깃) —트랜스파일링—> dist 폴더(결과)에 저장
-w 타깃 폴더에 있는 모든 파일들의 변경을 감지하여 자동으로 트랜스파일한다.
(--watch 옵션의 축약형)
-d 트랜스파일링된 결과물이 저장될 폴더를 지정한다.
(--out-dir 옵션의 축약형)
yarn build
dist폴더는 알아서 생성된다.
플러그인 설정하는 방법
트랜스파일하면서 프리셋이 지원하지않는 플러그인에서 에러가 발생한다. 별도로 설치하자.
// ES6 클래스
export class Foo {
// 클래스 필드 정의 제안
#private = 10;
bar() {
return this.#private;
}
}
최신 Babel 프리셋은 지원되는 것 같다! (
설치가 필요한 플러그인은 Babel 홈페이지에서 검색 → 설치
.babelrc
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
브라우저에서 모듈 로딩 테스트
public/index.html
<!DOCTYPE html>
<html>
<body>
<script src="../dist/lib.js"></script>
<script src="../dist/index.js"></script>
</body>
</html>
브라우저로 열기 (짱짱맨 크롬이 아닌 익스프롤러를 사용하도록 하자!)
Uncaught ReferenceError: exports is not defined at lib.js:3
index.js:3 Uncaught ReferenceError: require is not defined at index.js:3
브라우저의 ES6 모듈 기능을 사용하는 것은 문제 때문이다.
Webpack을 통해 문제를 해결해보자.