본문 바로가기

Javascript/Javascript(ES6)

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 파일을 생성하고 아래처럼 작성

1
2
3
{
  "presets": ["env"]
}


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

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

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

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

6. 트랜스 파일 설정하기

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

1
2
3
"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

반응형