게으른 개발자

2017년 8월에 갑자기 등장하여 주목받기 시작한 빌드툴이 있습니다. Parcel.js라는 빌드툴은 기존의 webpack, gulp, grunt등과는 다르게 빠른 퍼포먼스를 전면에 내세우고 시작하는 빌드 툴입니다. 이번 포스팅은 최근 릴리즈된 Parceljs의 특징과, 사용법을 간단하게만 살펴보겠습니다.

Parcel.js 특징

Parcel.js의 특징은 공식홈페이지를 이용해 보겠습니다.

1) 빠른 번들링

Parcel은 AST 작업자 프로세스를 사용합니다. AST 프로세스를 사용함으로써 멀티코어 컴파일을 활성화하고 다시 시작한 후에도 빠른 재구축을 위한 파일 시스템 캐시를 가지고 있습니다.

2) 모든 asset들을 번들링

기존의 webpack의 경우 로더 플러그인을 설치하여, 해당 로더들을 등록시키는 것으로써 빌드를 진행했습니다. 예를 들면, es6로 구성된 javascript를 es5로 변경시키기 위해서는 다음과 같은 작업이 이루어져야 합니다.

  // js build
  const webpack = require('webpack');

  return {
    modules: [
      {
        test: /\.js/,
        loader: ['babel-loader'],
      }
    ]
  };

그러나, Parcel에는 이미 js, css, html에 관련된 번들링 요소들을 내장하고 있기 때문에, 따로 복잡한 설정이 필요없이 번들링을 할 수 있습니다. 계속해서 추가되고 있으며, es6 뿐만아니라 typescript 까지 번들링을 지원해 줍니다. es6에서 es5로 컴파일을 위해서 babel js를 많이 사용하는데, 해당 부분은 .babelrc로, css같은 경우 postcss 모듈 설치 후 .postcssrc 등으로 설정만 하면, html 인라인 상에서 해당 소스에 대한 번들링과 컴파일링을 진행 후, hash까지 부여하여 html, css, js에 대한 파일을 dist 폴더에 자동으로 번들링 해줍니다.

3) code splitting 자동 설정

코드 분할을 webpack에서는 설정에 따라 해주어야 하지만, Parcel js는 import 구문을 동적으로 분할하여 사용합니다.

4) 자동 Hot Module Replacement

Hot Module Replacement 기능이 자동으로 내장되어 있습니다. 개발자는 개발할때 command option값에 따라 구분만 시켜주면 됩니다.

장점

Parcel js는 컴파일에 대한 프로세스를 멀티코어 프로세서를 사용하여 각 코드를 병렬로 컴파일함으로써 초기 빌드 속도가 webpack에 비해서 크게 향상됩니다. 추가적으로 파일 시스템 캐시를 가지고 있기 때문에, 이후에 빠른 시작을 위해서 파일당 컴파일된 결과를 캐싱하여 실행합니다. 또한, 기존의 번들러들은 문자열 로더를 중심으로 구축하는것에 비해, Parcel은 AST에서 작동하여 파일당 하나의 구문 분석 및 변환, 코드 생성이 빠르게 실행되는 장점이 있습니다.

물론, 아직까지는 8월에 출시한 번들러이므로 추가적인 설정이나 option이 더 필요하겠지만, 경량화된 서비스 구성 및 빠른 프로토타이핑을 원하시는 front-end 개발자시라면 충분히 고려해볼만 한 package 입니다. 또한, 실험해본 결과로 scss 컴파일링을 통해서 빠르게 react 등의 framework를 사용한 프로토타이핑이 가능해 보였습니다. 하지만, 실제 서비스를 구현하기 위해서는 다양한 option 값들이 존재해야 하기 때문에, 각 상황에 맞춰 번들러를 선택하시는 것이 좋을 것 같습니다. :)

사용해보기

1) 설치

Parcel js는 parcel-bundler 설치를 통해서 가능합니다.
command tool (terminal, powershell)에서 npm을 통해서 parcel-bundler를 전역 혹은 local로 설치합니다.

# 전역설치
npm install -g parcel-bundler
# 프로젝트 내 설치 - package.json에 script 설정 필요
npm install parcel-bundler --save-dev

2) 구성

테스트를 위해서, 프로젝트 root 폴더에 index.html, index.js, main.js, index.css를 생성할까 합니다. index.html에는 다음과 같이 설정합니다.

es6 변환을 위해 babel preset을 설치합니다.

npm install babel-preset-env babel-preset-es2015

.babelrc를 통해 compiler를 설정합니다.

{
  presets: ['env', 'es2015']
}

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div class="test-body">
      Hello world!
    </div>
    <script src="./index.js">
  </body>
</html>

index.css에는 다음과 같이 작성하겠습니다.

.test-body {
  width: 200px;
  height: 500px;
  background-color: #bdbdbd;
  text-align: center;
}

index.js에는 다음과 같이 작성합니다.

// index.js
import main from './main';

(() => {
  main();
});

main.js에는 다음과 같이 작성합니다.

const main = () => {
  conole.log('HelloWorld');
};

export default main;

3) 번들링

테스트를 위한 초기 환경 구성은 끝났습니다. parcel을 통해 해당 파일들을 컴파일 하겠습니다.

parcel index.html

끝입니다! 해당 command를 입력하고 나면, parcel 프로젝트 폴더에 dist 폴더가 생성되며, 빌드된 html, js, css 파일이 같이 있는 것을 보실 수 있습니다. 또한, html을 열어보시면,

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./a22184102daxv2.css">
  </head>
  <body>
    <div class="test-body">
      Hello world!
    </div>
    <script src="./ad213gg9dh0s.js">
  </body>
</html>

처럼 hash값으로 부여된 번들링된 파일이 생성되며, html에서도 자동으로 import에 대한 파일 설정이 완료됩니다! 정말 간단합니다. 또한, 현재 서버가 올라가 있는 상태이므로, 코드를 변경하면 webpack의 Hot Module Replacement처럼 코드 변경이 바로 적용됩니다.

만약, 서버를 올리지 않고 사용하고 싶으시다면, 다음과같이 command를 입력하면 됩니다.

parcel watch index.html

해당 command는 서버에 올라가지 않고, 외부 서버를 사용하면서 Hot Module replacement를 사용할 수 있도록 해줍니다. (일종의 --watch 설정이 포함되어 있습니다.)

개발이 완료된 후, 배포를 원하실때는 다음과 같이 설정하면 됩니다.

parcel build index.html

해당 command를 입력하시면, js파일은 자동으로 uglify와 minify를 실행하며, 배포 모드에 맞도록 나머지 파일들을 자동으로 조정합니다.

이렇게 Parcel js는 내장된 기능을 통해서 webpack의 다양한 설정이 필요없이 바로 빠르게 개발을 할 수 있다는 장점이 있습니다. 또한, 빠른 컴파일 속도를 통해서 앞으로가 기대되는 빌드 툴이라고 생각 할 수 있습니다. 아직 8월달에 나와 다양한 설정에 대한 부분이 미미하며, customizing이 불가능 하나, 계속해서 업데이트 되어 webpack을 위협할 번들러로 발전하지 않을까 생각합니다. :) 해당 테스트 코드가 궁금하시다면, 제 github repository 를 참고하시면 도움 되실거라 생각합니다. :)

JS,CSS,HTML Build tool Parcel.js 리뷰

December 14, 2017