[Parcel]Parcel 프로젝트 생성
Parcel
- 다른 번들러들보다 빠름
- 설정 파일이 필요 없거나 최소한으로 설정
성능
| 번들러 | 시간 |
|---|---|
| browserify | 22.98s |
| webpack | 20.71s |
| parcel | 9.98s |
| parcel - 캐시 사용 | 2.64s |
환경
nodejs: 16.16.0
프로젝트 생성
프로젝트를 생성할 디렉토리를 만들고 그 디렉토리에서 아래 명령어를 실행
# package.json을 생성
yarn init
# parcel 설치
yarn global add parcel-bundler
# scss, sass를 사용하기 위해서는 sass 모듈을 설치
yarn add sass
프로젝트 구조
├── package.json
├── src
│ ├── images
│ │ └── html_logo.png
│ ├── index.html
│ ├── index.scss
│ ├── index.ts
│ └── styles
│ └── main.scss
파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parcel Example</title>
<link rel="stylesheet" href="./styles/main.scss"/>
<link rel="stylesheet" href="./index.scss"/>
</head>
<body>
<h1 class="main-title">
Hello Parcel!
</h1>
<div>
<img id="htmlImage" src="./images/html_logo.png"/>
</div>
<script src="./index.ts"></script>
</body>
</html>
./src/index.html
.main-title {
color: #748ffc;
}
./src/index.scss
console.log('index.ts');
const htmlImage = document.getElementById('htmlImage');
htmlImage?.addEventListener('click', () => {
alert('CLICK!!');
});
./src/index.ts
h1 {
font-size: 42px;
}
./src/styles/main.scss
{
"name": "parcel-init",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "parcel ./src/index.html"
},
"dependencies": {
"parcel-bundler": "^1.12.5",
"sass": "^1.54.3"
},
"devDependencies": {
"typescript": "^4.7.4"
}
}
./package.json
실행
yarn dev
package.json 파일에 scripts에 설정한 dev로 실행
실행 화면
이미지를 클릭하면 alert이 나타난다
Leave a comment