오늘은 웹 어플리케이션 번들러 3대장webpack, rollup, parcel중 하나인 parcel의 세팅 방법에 대해 알아보겠습니다.
물론 알아볼 것도 없이 parcel 홈페이지가 워낙 번역이 잘되어 있긴 합니다 ㅎㅎ;;
그래도 세팅이 어려운 분들을 위해 작성해봅니다.
시작하기
먼저 parcel을 실행하려면 parcel을 설치해야겠죠?
Yarn:
yarn global add parcel-bundler
npm:
npm install -g parcel-bundler
그 다음
yarn init -y
npm init -y
그런 다음 index.html
<html>
<body>
<script src="./index.js"></script>
</body>
</html> console.log('hello world')실행
parcel index.html
이런식으로 실행하면 parcel이 자동으로 다시 빌드하고 핫리로드도 지원합니다.
그냥 진입점 파일만 지정해주면 됩니다.
개발 환경
parcel은 옵션을 건드릴게 없습니다. 그게 장점이라면 장점이죠.
굳이 개발할 때 넣을 옵션이 있다면
--open
parcel index.html --open
이런식으로 끝부분에 명령어를 넣어주면 실행하는 순간 브라우저창이 열리게 됩니다.
프로덕션
parcel을 빌드하면 기본적으로 dist폴더가 생성되며 그 안에 빌드된 파일이 저장됩니다.
dist폴더명을 다른 것으로 하고 싶을 땐
--out-dir
parcel build index.html --out-dir build
로 하시면 폴더명이 build로 바껴 빌드됩니다.
--public-url
그리고 기본적으로 빌드를 하면 외부 파일들의 경로가 아래처럼 루트 경로로 되어 있을 겁니다.
<html>
<body>
<script src="/a125gegweg.js"></script>
</body>
</html>이것을 아래와 같은 방식으로 외부 파일들의 경로를 바꾸고 싶을 때
<html>
<body>
<script src="a125gegweg.js"></script>
</body>
</html>parcel build index.html --public-url ./
이런식으로 하시면 됩니다.
babelrc
es6이상의 문법을 사용하시면 IE11이하에서 지원을 안 하기 때문에 babel로 es5이하로 변환을 시켜줘야 합니다.
기존의 babel은 쓰려는 문법이 @babel/preset-env가 지원을 안하는 문법이면 필요한 plugins를 넣어줘야 했는데
이제는 간단하게 적용할 수 있습니다.
참고 .babelrc파일은 프로젝트 루트 경로에 넣으셔야 합니다. 그래야 parcel이 파일을 인식해서 코드를 변환합니다.
// .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage", // or "entry"
"corejs": 3
}
]
],
"plugins": [
[
"@babel/transform-runtime",
{
"corejs": 3
}
]
]
}
postcssrc
css 전처리기입니다. 아직 postcss의 기능들을 다 모르기 때문에 autoprefixer만 넣고 사용중입니다.
// .postcssrc
{
"modules": false,
"plugins": {
"autoprefixer": true
}
}imagemin.js
이건 제가 추가한 js입니다.
작업을 하실 때 이미지들을 압축해서 사용할 필요가 있는데 그걸 하나하나 압축하기엔 시간도 아깝고 제일 중요한 건 귀찮습니다. ㅎㅎ
이때 필요한게 imagemin입니다. 이 플러그인을 통해 원하는 경로에 있는 모든 이미지 파일들을 용량 최적화를 진행합니다.
// imagemin은 압축된 파일들을 새폴더에 출력해주는데
// 이것을 그냥 제자리에 압축된 채로 놔누게 하려고 쓰는 플러그인입니다.
const imagemin = require('imagemin-keep-folder');
// png파일을 압축하려고 쓰는 플러그인입니다. 이밖에도 많지만 이게 제일 오류가 적습니다...
// imagemin-pngquant 이것도 있는데 너무 오류가 많습니다.
const imageminOptipng = require('imagemin-optipng');
// jpg압축을 할 때 쓰는 플러그인입니다.
const imageminMozjpeg = require('imagemin-mozjpeg');
(async () => {
// dist/static/*.png 경로 내의 png를 다 압축합니다.
await imagemin(['dist/static/*.png'], {
use: [imageminOptipng()]
});
// dist/static/*.png 경로 내의 jpg를 다 압축합니다.
await imagemin(['dist/static/*.jpg'], {
use: [imageminMozjpeg()]
});
console.log(`image optimize complete`);
})();사용법
위의 설정들을 종합하면 현재까지의 사용법
"scripts": {
"start": "parcel public/index.html --open",
"build": "parcel build public/index.html --public-url ./ --out-dir dist && node imagemin.js"
}그리고 제가 추천하는 한가지
rimraf 입니다
알만한 사람은 다 아실겁니다. 폴더를 강제로 삭제할 수 있는 패키지죠.
빌드를 할 때 만약 이전에 빌드 했던 dist폴더가 그대로 남아있다면 그 안에 현재 빌드한 파일들과 이전에 빌드된 파일들이 함께 저장되게 됩니다. 그래서 뭐가 뭔지 모르는 지경이 되죠.
그래서 빌드할 때 이전에 빌드되었던 dist폴더를 제거할 필요가 있습니다. 그래서 rimraf가 필요하죠
설치는 간단합니다.
Yarn:
yarn global add rimraf
npm:
npm install -g rimraf
rimraf를 추가한 사용법입니다.
"scripts": {
"start": "rimraf dist && parcel public/index.html --open",
"build": "rimraf dist && parcel build public/index.html --public-url ./ --out-dir dist && node imagemin.js"
},저 명령어 사이에 있는 &&는 rimraf dist로 dist폴더를 지운 다음 parcel build하겠다는 명령어 입니다.
정말 간단하죠? 이런게 parcel의 큰 장점입니다.
하지만 단점도 있습니다.
빌드할 때 외부 파일들을 폴더별로 정리할 수 없다는 것입니다.
빌드를 해보시면 알겠지만 한 폴더내에 css,js,image다 모여있죠?
이게 아직 parcel이 지원을 안 한답니다.
parcel2에서는 지원한다고 하는데 빨리 놔왔으면...
그래도 난 파일들을 폴더별로 나누고 싶다 하시는 분은
이 링크로 들어가 보셔요. 누가 폴더별로 나누는 걸 구현해놨어요
이만 parcel의 간략한 세팅 방법에 대해 알아보았습니다.
