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

joabyjoa·2020년 5월 1일
1
post-thumbnail

간단한 정적 페이지를 만들어야 할 일이 생겨서 번들러로 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.jsonscripts에 추가해놓자.

6. 빌드하기

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

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

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

참고

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

0개의 댓글