Babel 설치하기

YouTube cloning 강의를 들으며 배운 내용을 복습합니다.

Babel?

공식 홈페이지에는 주로 ECMAScript 2015와 코드를 현재 또는 이전의 브라우저나 환경에 맞는 JavaScript로 바꿔주는 컴파일러라고 설명하고 있다.

아래의 예제처럼 arrow function 등을 Babel을 통해 바꿀 수 있다.

// 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/core

이름 그대로 babel 컴파일러의 코어로 npm install @babel/core 또는 npm install --save-dev @babel/core 명령어로 설치한다. (--save-dev로 설치할 경우 devDependencies에 설치가 된다.) 모든 변형은 .babelrc나 package.json 같은 로컬 구성 파일을 사용한다.

@babel/preset-env

대상 환경에 필요한 구문 변형에 대해 세세하게 관리할 필요없이 최신의 JavaScript를 사용할 수 있게 해준다. npm install @babel/preset-env 또는 npm install --save-dev @babel/preset-env 명령어로 설치를 한 후 .babelrc 파일에서 설정을 한다. targets 이 정해지지 않을 경우, @babel/preset-env는 모든 것을 ECMA2015와 코드로 바꾸는 것을 기본으로 한다.

{

​    "presets": ["@babel/preset-env"] 

}

@babel/node

babel-node는 Node.js CLI와 같게 작동하는 CLI이다. 작동 전에 Babel preset과 플러그인과 함께 컴파일한다는 장점이 있다. package.json의 scripts에서 사용할 수 있다. start는 npm start 명령어에 의해 실행되는데 아래 환경에서는 npm start를 할 경우 babel-node init.js 가 실행되게 된다.

npm install @babel/node

{

​    "name": "app",

​    "version": "1.0.0",

​    "dependencies": {

​        "@babel/core": "^7.2.2",

​        "@babel/node": "^7.2.2",

​        "@babel/preset-env": "^7.2.3"      

​    },

​    "scripts": {

​        "start": "babel-node init.js"

​    } 

}

참조
Babel
@babel/core
@babel/preset-env
@babel/node
npm-scripts