Parcel로 빠르게 프로젝트 시작하기

김은진·2020년 5월 1일

간단한 정적 페이지를 만들어야 할 일이 생겨서 번들러로 Parcel을 쓰기로 마음먹었다. 정말정말 간단한 HTML과 CSS 그리고 약간의 JS만 사용할 거라서 복잡함을 최대한 피하고 싶었다. 그래서 웹팩도 안녕, 개츠비도 안녕👋🏻 (물론 Parcel로도 리액트 프로젝트를 호다닥 시작할 수 있다.)

👍🏻 Parcel, 간단해서 좋아

나한테 웹팩 설정은 너무나 힘든 일이었는데, parcel은 설정하기가 굉장히 쉽다. (Vue나 React 같은 데서도 웹팩 설정을 숨기는 건 다 이유가 있는 것이다...) 게다가 빠르기까지!

Hot Module Replacement로 내용이 바뀌면 알아서 새로고침 해줘서 내 수고를 덜어준다.
따로 설정 하지 않아도 Code splitting을 지원한다.
SASS는 별다른 설정 없이 바로 사용할 수 있다! 😎
빠름 (사실 내가 직접 비교해보진 않았지만 그렇다고 함.)
bebel프리셋이나 postCSS 플러그인 등등 설정 파일에 있으면 Parcel이 알아서 빌드 과정에서 필요한 모듈을 설치해준다. 그래서 package.json 파일이 반드시 필요한 건 아니다. (그래도 있는게 좋겠지만)
공식 문서 한글화도 잘 되어있다.

🚀 빠르게 Static Web Page 만들기

1. Parcel 설치하기

npm install -g parcel-bundler
npm install -D parcel-bundler // 로컬로 설치하는 경우

2. 필요한 모듈의 설정 파일 작성하기

나는 babel, postCSS, postHTML을 사용했다.

babel: 최신 JavaScript 문법도 오래된 브라우저에서 돌아갈 수 있게 변환해줌

/.babelrc
```
{
	"presets": ["env"]
}
```

postCSS: 다양한 플러그인이 있지만 그중에서 크로스 브라우징을 위해 autoprefixer 사용

/.postcssrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "browers": [
        "> 1%",
        "IE 10"
      ]
    }
  }
}

postHTML: include, extend를 활용해서 반복되는 HTML 코드 작성을 줄일 수 있음

/.posthtmlrc.js

module.exports = {
	plugins: {
		'posthtml-include': {
			root: __dirname + '/src/components',
		},
		'posthtml-extend': {
			root: __dirname + '/src/layouts',
		},
	},
}

package.json을 작성한다면, 얘네들👇🏻이 들어가면 된다.

"devDependencies": {
		"autoprefixer": "^9.7.4",
		"babel-core": "^6.26.3",
		"babel-preset-env": "^1.7.0",
		"parcel-bundler": "^1.12.4",
		"postcss-modules": "^1.5.0",
		"posthtml-extend": "^0.3.0",
		"posthtml-include": "^1.3.3",
		"sass": "^1.25.0"
	}

3. PostHTML을 이용해서 마크업 하기

/src/layouts/base.html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Hello, Parcel!</title>
		<script src="/assets/scripts/main.js" defer></script>
		<link rel="stylesheet" href="/assets/styles/main.scss" />
	<body>
		<h1>Hello, Parcel!</h1>
		<nav>
			<block name="nav">
		<nav> 
		<main>
			<block name="content"></block>
		</main>
</body>
</html>

기본적인 구조가 들어있는 파일이다. extends해서 <block></block>에 내가 원하는 내용이 들어가게 할 수 있다.

/src/components/nav.html
```
<a href="/home.html">Go to Home</a>
<a href="/sub.html">Go to Sub</a>
```
여러 페이지에서 반복해서 사용하는 부분이다(Navigation, Pagenation 등). 따로 작성해 두었다가 필요할 때 include해서 쓰면 된다.

/src/home.html

<extends src="base.html">
	<block name="nav">
		<include src="nav.html"></include>
	</block>
	<block name="content">
		<h2>Home</h2>
		<p>Home content</p>
	</block>
</extends>

실제 페이지의 내용이다. <block></block> 안에 페이지 별로 들어갈 내용을 작성하면 된다.

3. 스타일 입히기

/src/assets/styles/_config.scss
```
$color-primary: dodgerblue;
$color-default: #333;
```
먼저 sass에서 사용할 변수들을 저장해놓자.
/src/assets/styles/main.scss
```
@import 'config';

body{
	color: $color-default;
}

h1 {
	color: $color-primary;
}
```
그리고 여기에 필요한 스타일을 쭉쭉 추가하면 된다.

4. 스크립트 추가하기

/src/assets/scripts/main.js

console.log('Parcel is running!')

스크립트가 필요한 경우 여기에 추가하자.

5. 개발 모드에서 페이지 확인하기

parcel src/home.html

/src/home.html을 엔트리 포인트로 개발 서버가 실행된다. 물론 원하는 엔트리 포인트로 바꿔도 된다. http://localhost:1234/에서 확인해가면서 개발을 진행해보자! 매번 치기 귀찮으면 package.json의 scripts에 추가해놓자.

6. 빌드하기

개발이 완료되었으면 일단 스스로 칭찬해준 뒤 🙌🏻🙌🏻🙌🏻

parcel build src/index.html -d build --public-url ./ --no-minify

/src/home.html을 엔트리 포인트로, 현재 루트에서 빌드를 한다. /build에서 결과물을 확인할 수 있다. --no-minify옵션을 끄면 전부 한 줄로 변환된다.

참고

김은진

검은 콩 세 개가 세상을 구한다🐾

다음 포스트