자바스크립트 ES6 개발 환경 - 걸프(gulp), 바벨(babel) / macOS 10.15

자바스크립트 ES5는 현재 최신 브라우저라면 거의 모든 기능을 지원하고 있습니다. 하지만 ES6 제대로 지원하는 브라우저는 많지 않습니다. 아래는 kangax의 github페이지에서 브라우저별 es6문법 호환 비교표입니다.

https://kangax.github.io/compat-table/es6/

많은 브라우저들이 ES6 문법을 일부 지원하고 있는 것을 볼 수 있지만 아직까지 완벽하게 지원되지 않는 것 같습니다. 때문에 ES6를 선택하고 개발하고자 한다면 트랜스컴파일이라는 작업을 해줘야 합니다. ES6코드를 ES5로 말이죠. 이번 글에서는 그중에서도 babel과 gulp라는 툴의 사용법을 간단히 적어보려 합니다.

• Gulp (걸프):  반복적인 개발 작업을 자동화하는 빌드 도구
• babel(바벨): ES6코드를 ES5코드로 변환해주는 트랜스컴파일러

그전에 우선 npm부터 설치 하여야합니다.(설치 방법: https://lucidmaj7.tistory.com/123)  

1. gulp 전역 설치

nodejs와 npm을 정상적으로 설치하면 아래 명령어를 통해 gulp를 설치합니다.

npm install -g gulp

그런데 macOS 10.15 카탈리나에서는 권한 문제로 설치가 제대로 안되는 것을 볼 수 있습니다. 이 현상은 macOS 10.15 카탈리나에서 발생하는 문제로 아래 포스트를 참고하여 해결 할 수 있습니다.

https://lucidmaj7.tistory.com/124

macOS 10.15 카탈리나에서 npm 패키지 설치시 권한 오류

2. 프로젝트 초기화 

프로젝트를 생성할 경로로 이동 후 npm init 명령을 통해 프로젝트를 초기화 합니다. 

npm init

다음에 es6코드가 저장될 폴더 es6와 트랜스컴파일된 소스가 저장될 폴더인 dist폴더를 생성해줍니다.

mkdir es6
mkdir dist

3. 프로젝트 설정하기 

프로젝트 경로에 gulp @babel/core, babel-preset-es2015,  gulp-babelgulp babel-core babel-preset-es2015 gulp-babel@7 을 설치합니다. 배포시 필요 없으므로 --save-dev를 파라미터로 설정합니다. gulp-babel은 7.x버전을 설치합니다.

npm install --save-dev gulp babel-core babel-preset-es2015 gulp-babel@7

 

 

프로젝트 루트에 .babelrc파일을 생성하고 다음과 같이 내용을 추가합니다. 이 파일은 프로젝트에서 바벨을 사용할때 ES6를 사용한다고 인식합니다.

{ "presets" : ["es2015"] }

 

3. gulpfile.js 

gulpfile.js를 작성하기 전에 우선 예제로 사용할 프로젝트 경로를 만들어봅시다.

프로젝트 루트 경로에 dist와 es6경로를 생성하였습니다. es6에는 es6코드가, dist는 트랜스컴파일된 코드가 저장됩니다. 

이렇게 폴더를 생성하고나서 gulpfile.js파일을 생성해 아래와 같이 코드를 작성해 봅니다.

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', function(){
   return gulp.src("es6/**/*.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

이렇게 gulpfile.js를 작성한 후 es6예제 코드를 es6폴더에 생성하여 작성해 봅니다.

'use strict';

const sentences = [{subject :'Javascript', verb: 'is' , object: 'great'},
{subject :'Javascript', verb: 'is' , object: 'great'}];

function say({subject, verb, object}){

    console.log(`${subject} ${verb} ${object}`);

}

for(let s of sentences){
say(s);
}

 

4. gulp 작업 실행

프로젝트 루트 경로로 이동하여 gulp명령어를 실행합니다.

위와 같이 출력되면 정상적으로 빌드가 된 것 입니다. dist폴더에 es5로 변환된 코드가 저정된 것을 볼 수 있습니다.

'use strict';

var sentences = [{ subject: 'Javascript', verb: 'is', object: 'great' }, { subject: 'Javascript', verb: 'is', object: 'great' }];

function say(_ref) {
    var subject = _ref.subject,
        verb = _ref.verb,
        object = _ref.object;


    console.log(subject + ' ' + verb + ' ' + object);
}

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
    for (var _iterator = sentences[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
        var s = _step.value;

        say(s);
    }
} catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
} finally {
    try {
        if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
        }
    } finally {
        if (_didIteratorError) {
            throw _iteratorError;
        }
    }
}

 

이렇게 gulp와 babel로 빌드 작업을 하는 것을 알아 보았습니다.