ES6 바벨(babel)을 이용한 트랜스 파일링(es6 개발환경 구축하는 방법, feat.webpack)

Babel (바벨 : 트랜스파일링)

Babel(바벨)은 ES6문법으로 작성된 js파일을 ES5문법으로 작성된 js파일로 만들어주는 작업을 해주는 도구다.

대부분의 브라우저가 ES6문법을 완전히 지원해주지 않기 때문에 ES6문법의 자바스크립트 파일을 사용할 수 없다.

따라서 Babel(바벨)을 이용해서 개발은 ES6로 하되 브라우저는 트랜스 파일링된 ES5문법의 js파일을 사용하게 하는 식의 구성을 갖게 해야한다.

---

Babel 환경 설정 방법

바벨을 사용하기 전에 node.js의 NPM에 대해서 알아야한다. (패키지 매니저로 babel-cli등을 설치하기 위함.)

1. 프로젝트 디렉토리 생성

- mkdir myproject && cd myproject

2. package.json 생성

- npm init -y // 여기서 -y옵션은 npm init으로 package.json파일을 생성할 때 설정해야할 것들(name, author, version등...)을 디폴트로 생성하는 옵션이다.

3. babel-cli 설치

- npm install babel-cli --save-dev //--save옵션은 패키지 설치뿐만 아니라 package.json 파일의 dependencies에 작성하는 것이고 --save-dev까지 붙이면 package.json파일의 devDependencies에 작성하는 것이다.

devDependencies에 작성하는 것을 개발용으로 패키지를 받는 것으로 나중에 의존성이 필요없을때는 "npm install --production"으로 devDependencies에 있는 패키지는 빼고 설치할 수 있는 장점이 있다.

4. babel-preset-env 설치

- npm install babel-preset-env --save-dev

프리셋(preset)은 여러가지가 있는데 해당 문법을 사용할 수 있게 도와주는 플러그인의 모음으로 생각하면 되고 이것을 바벨에게 설정해줘야 한다.

5. .babelrc 파일 생성

- .babelrc 파일을 생성하고 아래처럼 작성

{
  "presets": ["env"]
}

- 제로초님 블로그에서 참고했을 때는 아래처럼 작성한다.

{
  "presets": ["env", { "targets": { "browsers": ["last 2 versions", "> 5% in KR"] } }, "stage-2"]
}

{"targets" : ~~}, "stage-2"가 추가되었는데 targets는 env에 대한 옵션으로 브라우저가 최신 두 버전과 한국에서 점유율 5퍼센트 이상의 브라우저를 모두 지원하라는 뜻이라고 한다.

또한 "stage-2" preset을 사용하려면 npm install로 babel-preset-stage-2를 설치해야한다.

6. 트랜스 파일 설정하기

- package.json파일에 script 부분을 추가한다. 

"scripts": {
    "build": "babel src -w -d lib"
  },

 build 명령어를 만들고 build를 실행시키면 src폴더에 있는 es6문법의 js파일을 lib폴더에 es5문법의 js파일로 트랜스파일링 해준다. (src, lib같은 폴더명은 맘대로 변경해도 상관없음)

-w : --watch 옵션 축약형으로 변경이 있을 때 자동으로 감지해서 트랜스파일링해준다.

-d : 출력파일(여기서 es5의 스크립트파일)이 저장될 디렉토리를 지정한다.

* 이렇게 설정이 끝나면 "npm run build" 명령어를 수행하면 src디렉토리에 있는 스크립트파일(es6)을 트랜스 파일링해서 es5 스크립트파일이 lib디렉토리에 생성된다. 또한 변경이 있을 때 이미 트랜스파일된 파일이 있다면 자동으로 변경된다.

---

트랜스파일링이 끝?! 

위의 방법으로 바벨을 이용해서 트랜스파일링 끝에 ES5문법의 자바스크립트파일을 생성하는 것까지는 좋았다.

하지만 위의 방법은 node환경에서 es6문법을 사용한 것이고 브라우저에서는 또 다른 것이 필요하다.

webpack이 필요한데 webpack은 다음시간에 더 작성한다. (중간저장)

참고 사이트

http://poiemaweb.com/es6-babel

https://www.zerocho.com/category/EcmaScript/post/57a830cfa1d6971500059d5a