babeljs - 최소한의 코드로 이해하기
바벨은 ES6를 EcmaScript로 transpiling하는 도구이다. 바벨을 실행하는 가장 간단한 방법은 nodejs에서 실행하는 것이다.
다음 js는 arrow function이고 오래된 브라우저에서는 작동하지 못하므로 오래된 버전의 js로 변환되어야 한다.
var hello = (name) => {
return `Hello ${name}`;
}
이를 nodejs로 컴파일 하려면 다음을 수행하면 된다. 이 때 위 hello소스는 src\index.js로 저장되어 있다고 가정한다.
mkdir sample && cd sample
npm init -y
npm install @babael/core @babel/preset-env @babel/cli --save-dev
이제 package.json을 수정한다
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src --out-dir lib"
},
"keywords": [],
"author": "",
다른 부분은 그대로 두고 scripts부분을 고쳤다. babeljs는 소스를 어떤 구문으로 컴파일할지 구성 파일등을 통해 설정한다. sample폴더에 .babelrc.json을 다음처럼 만든다.
{
"presets":[["@babel/preset-env"]]
}
preset-env는 옵션을 지정하지 않으면 ES2015 이후의 모든 문법을 ES5 문법으로 변환한다. 이제 커맨드에서 다음 명령을 수행한다.
npm run-script build
결과는 다음과 같다.
"use strict";
var sayHello = function sayHello(name) {
return "Hello ".concat(name);
};
Subscribe via RSS