레거시 jQuery 프로젝트를 es6기반으로 변경하기

프론트엔드 개발을 오래하다보니 예전 프로젝트를 관리할 일이 종종 생기고 있습니다. 그런데 워낙 프론트엔드의 기술 발전이 빠르다보니 이미 아무도 쓰지 않는 예전의 기술로 프로젝트를 관리하는 것이 무척 난이도 높은 작업이 되버렸습니다. 시대의 흐름에 맞게 es6와 npm기반으로 바꾸고 싶어서 다양한 방법을 리뷰하다가 rollup.js과 buble를 알게 되었습니다.

rollup.js는 es6의 표준 모듈 시스템을 지원하는 bundler이고, buble는 es6코드를 es5로 바꿔주는 transpiler입니다. 더 복잡하고 유명한 프로그램도 있지만 제 목적엔 rollup.js이 최적이더군요. 특히나 최종 결과가 너무 깔끔하게 나와서 감동했습니다.

rollup.js의 환경 설정에 시간이 걸리는데, 한번에 처리하기 위해서 boilerplate를 github에 올려놨습니다. node.js와 git가 설치되어있다면 5분도 안걸립니다.

git clone https://github.com/fri13th/rollup-jquery-boilerplate your-project
cd your-project
npm install

build명령을 실행시키면 es6로 작성된 src/main.js 파일을 바탕으로 dist폴더에 es5형식의 파일이 생성됩니다.

npm run build

그런데 파일을 수정할 때마다 빌드명령을 입력하기는 귀찮은 일이죠. 그럴 때를 위해  watch모드가 존재합니다.

npm run watch

built-in서버 기능은 안넣었는데 html 파일에 dist/app.js를 넣어서 제대로 동작하는지 확인해보시기 바랍니다. 혹은 직접 만들어진 코드를 보셔도 됩니다.

browser-sync를 이용하여 built-in서버기능을 넣었습니다.

npm run serve

index.html 파일과 src폴더내의 js파일을 수정하면 바뀐 결과가 바로 브라우저에 반영되는 것을 보실수 있습니다.

아래처럼 es6 형식으로 작성한 코드가

import $ from 'jquery';
import {view} from 'template';
import {cube} from 'utils';

let array = [1, 2, 3];

console.log(cube(3));
$(() => console.log(view('World', array)));

es5로 깔끔하게 변환됩니다.

(function ($) {
  'use strict';

  $ = 'default' in $ ? $['default'] : $;

  function view(who, array) {
    return ("\nHello, " + who + "!\n" + (array.map(function (no) { return ("" + no); }).join('')) + "\n");
  }

  // This function gets included
  function cube ( x ) {
    return x * x * x;
  }

  var array = [1, 2, 3];

  console.log(cube(3));
  $(function () { return console.log(view('World', array)); });

}(jQuery));
//# sourceMappingURL=app.js.map

이렇게 개발환경을 설정하니 es5로 작업하는 것과 속도 면에서 별 차이가 없고, es6의 깔끔한 문법덕분에 개발 효율은 몇배로 증가했습니다. 예전 코드를 main.js에 통채로 카피해서 하나씩 es6화 하는 것도 가능하고, 최종결과가 IE8같은 레거시 브라우저에서도 문제 없이 돌아가니, 지금 당장 프로젝트에 적용할 수 있는 것도 무척 매력적입니다.

이번에 rollup.js를 써서 개발하면서 느낀 것은 Javascript의 미래가 생각보다 멀리 있지 않다는 것입니다. es5는 이제 잊으시고 지금 당장 es6개발에 도전해보시기 바랍니다.