1. 설치

# global
$ npm install -g parcel-bundler

# local
$ npm install --save-dev parcel-bundler
$ npm install -D parcel-bundler
# (global, local 중 선택1)

2. 프로젝트 시작하기

간단한 Parcel 앱을 만들어 보겠습니다.

parcel-App 이라는 폴더를 만들고 package.json 를 만들어 줍니다.

$ mkdir parcel-App
$ cd parcel-App
$ npm init -y # package.json 생성

→ 디렉터리 구조

Untitled

<!--index.html-->
...
</head>
<body>
  <h1>Hello Parcel.js!</h1>
  <script src="./src/main.js"></script>
</body>
</html>

// main.js
require('./main.css');
console.log('Hello Parcel!');

// main.css
h1 {
	color: tomato;
}

Parcel로 빌드하기 위해서 단지 진입 파일을 선택하면 됩니다.

$ parcel index.html

브라우저에서 http://localhost:1234 에 접속하면 빌드된 페이지를 볼 수 있습니다.

만약 포트번호를 변경하고 싶다면 -p <port number> 옵션으로 덮어쓸 수 있습니다.

$ parcel index.html -p 9876

*http://localhost:9876 으로 접속할 수 있습니다.*