bable 사용법

:: 바벨 (Babel) 이란?

바벨(Babel)은 자바스크립트를 위한 다목적 컴파일러로 자바스크립트 코딩을 할때 마술같은 여러가지 기능을 제공한다. 특히 바벨(Babel)은 여러 자바스크립트 표준에 맞추어 코드를 자동으로 변환해주는 트랜스파일러로 코드를 직접 바꾸지 않더라도 최신 표준에 맞추어 개발 할 수 있도록 도와준다. ( 엄청난 기능을 하는 Babel 플러그인이 많다 )

:: 바벨 (Babel) 사용법

Node.js가 이미 설치되어 있다고 가정한다.

1. 예제를 진행할 디렉토리를 하나 만들고 이동

mkdir babelTest cd babelTest

2. 프로젝트 초기화 및 Babel 설치

npm init -y npm install --save-dev babel-cli npm install --save-dev babel-preset-es2015

3. 예제로 사용할 간단한 자바스크립트 파일(test.js)을 작성

class NameTag { constructor (name) { this.name = name } print() { console.log('Hello,',this.name) } } const nameTag = new NameTag("memoming") nameTag.print()

4. Babel로 변환 적용해보기

여기서 우리는 es2015 프리셋을 사용하여 변환한다.

 

babel test.js --presets=es2015 -o test.out.js

 

이렇게 하게되면 아래처럼 es2015 프리셋에 맞추어 변환된 test.out.js 파일이 생성된다.

 

"use strict"; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var NameTag = function () { function NameTag(name) { _classCallCheck(this, NameTag); this.name = name; } _createClass(NameTag, [{ key: "print", value: function print() { console.log('Hello,', this.name); } }]); return NameTag; }(); var nameTag = new NameTag("memoming"); nameTag.print();

 

5. babelrc 생성하기

babel을 사용할 때 매번 프리셋을 입력해주기엔 번거로우므로 이를 명시해주자.
자신이 사용하는 에디터등을 사용해서 .babelrc 파일을 생성하고 아래와 같이 적는다.

 

{ "presets" : ["es2015"] }

 

그러면 이제 다음부터는 아래처럼 프리셋을 명시하지 않아도 .babelrc 파일에서 가져와 적용해준다.

 

babel test.js --presets=es2015 -o test.out.js babel test.js -o test.out.js

 

6. 더 더 더 편하게 Babel 사용하기

package.json에 명령어를 등록해 사용하면 더 편리하게 Babel을 사용 할 수 있다.
여기서는 build와 start를 추가한다.

 

{ ... (생략) ... "scripts" : { "build" : "babel test.js -o test.out.js", "start" : "node test.out.js" }, ... (생략) ... }

 

이렇게 적어주면 이제부터는 아래와 같이 사용할 수 있다.

 

npm run build # 바벨을 사용해 변환 npm run start # 변환된 파일을 실행

 

7. 자동으로 변환 적용해보기

 

매번 Babel을 이용해 변환하는 것도 귀찮으므로 자동으로 변환이 되도록 해보자.
-w 또는 --watch 인자를 주면된다.

 

babel test.js -o -w test.out.js

 

이 역시 package.json에 명령어로 등록하면 편하게 사용 할 수 있다.

 

{ ... (생략) ... "scripts" : { "build" : "babel test.js -o test.out.js", "start" : "node test.out.js", "watch" : "babel test.js -w -o test.out.js" }, ... (생략) ... }npm run watch

 

 

출처 : memoming.com/39

[Babel] 초간단 바벨(Babel) 사용법