티스토리 뷰
최근 프론트엔드 커뮤니티에서 엄청나게 뜨거운 녀석이 등장했습니다. 1주 동안( 12. 10 ~ 12. 16) github star 4000개 이상을 받은 번들러가 등장한 것인데요.
바로 parcel 입니다. (글 작성한 2017-12-15 일 기준으로 parceljs 사이트가 한글 번역 되었습니다.)
[github trend에서 1주 기준 모습] 무려 4163스타를 한주동안 받았다고 합니다.
Grunt 에서 Gulp로 그리고 최근에는 Webpack 을 쓰고 있는데 또?? 라는 생각이 제일 먼저 들기 시작했습니다.
어떤놈인지 찾아보니 설정없이 Webpack보다 빠른 번들러라고 소개하고 있습니다.
설정이 필요없다고?? 알아서 bundle이 되는건가??
궁금한 생각에 한번 angular-cli 로 생성되는 app을 parcel로 작업해보았습니다.
문서를 읽어봤을때는 Typescript에 대한 내용이 전혀 없었으며, 따로 플러그인이 있다는 내용도 없어서 찾아보니 typescript plugin이 있었습니다.
그럼 Angular를 작동시키는데는 문제가 없다 판단하여 작업을 시작하였습니다.
1. 프로젝트 생성
먼저 angular-cli를 이용해서 angular 프로젝트를 생성하였습니다.
ng new angular-parcel-example --style=scss --routingangular-cli로 프로젝트를 생성하는 이유는 설정 없이도 angular-cli 에서 제공되는 기능과 얼마나 비슷하게 사용할 수 있을지 궁금했습니다.
2. parcel bundler 설치
그 다음은 parcel를 설치해야 합니다. 전역 설치를 해도 되지만 저는 local 설치로 진행하였습니다.
yarn add parcel-bundler parcel-plugin-typescript@0.2.0-angular.0 --dev
or
npm i parcel-bundler parcel-plugin-typescript@0.2.0-angular.0 --save-dev3. package.json의 script 명령어 수정
angular-cli로 serve 및 build를 하던 명령어들을 parcel로 변경해야합니다. 아래와 같이 변경하시면 됩니다.
"scripts": {
"ng": "ng",
"parcel": "parcel",
"start": "parcel ./src/index.html",
"build": "parcel build ./src/index.html"
}4. index.html 수정
parcel은 웹앱의 진입점(여기선 index.html)에서 상대경로로 불러오는 파일들을 자동으로 bundle하는 방식입니다. 그렇기 때문에 .angular-cli.json 파일에서 설정되었던 main.ts와 polyfills.ts를 index.html에서 불러오는 처리를 추가해야 합니다.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "angular-parcel"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
...
}
],
...
}아래와 같이 index.html를 수정해주세요.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularParcel</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<!--해당 부분이 추가-->
<script src="polyfills.ts"></script>
<script src="main.ts"></script>
</body>
</html>yarn start
or
npm start
문제 없이 성공하였다면 localhost:1234로 접속하여 확인하시면 됩니다.
parcel도 webpack과 마찬가지로 hmr이 지원되고 있습니다. hmr의 경우 아무런 설정없이 적용이 되고 있습니다.
여기까지 봤을때는 확실히 parcel 이 주장하는 빠른 빌드와 zero config(설정없는) 번들러가 충분히 매력적입니다.
하지만 angular-cli 에서는 다양한 기능을 제공해주고 있습니다. ( serviceWorker / e2e test / generate / enviroment 등) 이러한 기능들을 그대로 설정없이는 무리가 있어보입니다.
그럼 angular-cli에서 webpack 대신 parcel로 변경하면 좋지 않나!? 싶은 생각에 찾아봤습니다.
네 지금 당장은 없다고 합니다.
저는 사실 webpack의 빌드 속도가 느릴만큼 큰 프로젝트를 진행하고 있지 않으니 괜찮습니다.
parcel의 비교대상은 webpack 이지 angular-cli 는 아니긴 합니다.
webpack 과 비교하면 처음 webpack이 어렵게 느껴졌던 설정 부분 없이도 쉽게 bundle이 가능하고 속도 또한 눈에 띄게 빠르다는 점은 매우 좋은 것 같습니다.
하지만 아직 나온지 얼마안되서 문서가 비약한점은 아쉽네요. 특히 플러그인쪽 문서는 너무 빈약합니다.
angular가 아닌 다른 프레임워크나 환경을 구성하는 프로젝트가 있으면 parcel로 다시 작업을 해봐야겠습니다.
이 포스팅의 예시는 github 저장소에 공개된 상태입니다. 관련하여 피드백은 언제나 환영입니다.
'Angular > Angular 2' 카테고리의 다른 글
| [ Angular / Rxjs ] Angular에서 unsubscribe(구독취소)은 언제 어떻게 해야하는가? (1) | 2017.09.14 |
|---|---|
| [ TypeScript / Angular ] export interface was not found in (0) | 2017.08.30 |
| [ Angular ] angular2를 이용하여 HNPWA 만들기 ( 1. Angular 프로젝트 작업 ) (0) | 2017.08.15 |
| [ Angular ] angular-cli.json의 Schema로 알아보는 angular-cli 기능들 (3) | 2017.07.25 |
| [ Angular ] Angular 4.0 정식 release (4.0에서 달라진점) (2) | 2017.03.27 |