0. 개요
Parcel 번들러의 기본적인 사용법을 알기 위해 아주 간단한 프로젝트를 진행
1. 프로젝트 폴더 생성
2. 패키지 설치
// package.json 파일 생성
$ npm init -y
// parcel 설치
$ npm i -D parcel-bundler3. package-json 파일, "script"
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
},1) dev 스크립트에 parcel 명령어로 index.html 연결
2) build 스크립트에 parcel build 명령어로 index.html 실행
4. 프로젝트 파일 생성
1) index.html, SCSS>main.scss, JS>main.js 생성
2) index.html 파일에 main.scss, main.js 파일 연결
3) reset css mdn 링크 연결
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parcel Bundler</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./scss/main.scss">
<script defer src="./js/main.js"></script>
</head>
<body>
<h1>Hello Parcel!!</h1>
</body>
</html>SCSS
$color--black: #000;
$color--white: #fff;
body {
background-color: $color--black;
h1 {
color: $color--white;
}
}
JS
console.log("Hello Parcel!");5. 개발 서버 실행
$ npm run devlocalhost 사이트 열어서 작업내용 확인
Frontend developer