현재의 브라우저는 ES6(ECMAScript 6) 자바스크립트를 지원하지 않는다.
ES6 코드는 컴파일러(트랜스파일러)를 사용해 현재의 브라우저에서 돌아가는
코드로 변환해야 한다.
바벨(Babel)이 ES6 코드를 컴파일하는 사실상의 표준이 되었다.

아래 투토리얼은 Babel를 이용해 ES6 어플리케이션을 개발하고 실행하기 위한
개발환경을 설정해 본다.

** Babel 6 버전이 설치된 경우, 변환작업이 진행되지 않을 수 있다.
Babel 6에서 설정이 변경되어 아래를 참조하여 설정을 해야 합니다.

http://ccoenraets.github.io/es6-tutorial

Current browsers don’t support all the new ECMAScript 6 (aka ECMAScript 2015) features yet (see comptability table). You need to use a compiler (transpiler) to transform your ECMAScript 6 code to ECMAScript 5 compatible code. Although there are other options, Babel has become the de-facto standard to compile ECMAScript 6 applications to a version of ECMAScript that can run in current browsers. Babel can also compile other versions of ECMAScript as well as React’s JSX, but that is beyond the scope of this tutorial.

In this unit, you set up a development environment to develop and run an ECMAScript 6 application using Babel.

 

Setting up Babel 6

Babel 6에서 ECMAScript 6 를 컴파일하기 위해
기존에 설치된 Babel 삭제하고 babel-cli 나 babel-core를
설치해야 합니다.

Babel 6에서 설정이 변경된 부분이 있습니다.

먼저, 기존에 설치된 babel, babel-core 등을 삭제합니다.

$ npm uninstall  –save-dev babel  babel-core

그리고, babel-cli, babel-core 등을 설치합니다.

$ npm install  –save-dev  babel-cli  babel-core

The babel npm package no longer exists. Instead, Babel has been split into multiple packages:

  • babel-cli, which contains the babel command line interface
  • babel-core, which contains the Node API and require hook
  • babel-polyfill, which when required, sets you up with a full ES2015-ish environment

To avoid accidental conflicts, make sure to remove any previous Babel packages like babel, babel-core, etc. from your package.json, and then npm uninstall them.

Babel 6에서는 개개의 변환(Transform)을 각각의 플러그인(Plugin)으로 구성하고,
이들 플러그인을 개별적으로 설치해야 한다. 그래서, preset(여러 플러그인의 묶음)을
추가해 놓았다. Preset을 설치하면 여러 플러그인을 한 번에 설치할 수 있다.
기본적으로 제공되는 preset은 babelpresetes2015, babelpresetreact 있다.

$ npm install  –save-dev babel-preset-es2015

위와 같이 Preset을 설치한 다음, Babel이 preset을 사용하도록 설정해야 한다.
.babelrc 파일을 프로젝트 폴더에 생성하고 아래 내용을 추가한다.

$ vi  .babelrc

{
    “presets”: [“es2015”]
}

 

마지막으로,  babel 컴파일을 실행하여 변환작업을 진행한다.

$ npm run babel

 

** “strict mode” 에러가 발생할 경우, main.js 파일 첫 줄에 ‘use strict’; 문장을 추가한다.

 

 

 

Leave a Reply