21.06.05 Babel

✔Babel이란? 

최신 사양의 자바스크립트 코드를 인터넷 익스플로러나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환해준다. 

 

✔예시 

ES6 화살표 함수, ES7 지수 연산자를 사용한 코드는 

[1, 2, 3].map(n => n ** n);

Babel을 사용하여 ES5 이하의 버전으로 변환한다. 

"use strict"

[1, 2, 3].map(function(n){
	return Math.pow(n, n);
});

✔사용법

# 터미널에 아래와 같이 입력하여 env preset 설치
$ npm install --save dev @babel/preset-env

//.babelrc 파일 생성하고 아래와 같이 작성
{
	"presets" : [@babel/preset-env"]
}

{
	//설치 직후
	"name": "es6-project",
  	"version": "1.0.0",
  	"devDependencies": {
    	"@babel/cli": "^7.7.0",
    	"@babel/core": "^7.7.2",
    	"@babel/preset-env": "^7.7.1"
}

{
	"name": "es6-project",
  	"version": "1.0.0",
    //scripts 추가해준다!
    "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"
}