01.프로젝트 생성
parcel-bundler에 대해 잘 학습할 수 있도록 하기 위해 실제로 프로젝트를 생성해줍니다.
1-1.패키지 설치
npm을 통해package.json파일을 생성하고parcel-bundler를 설치해줍니다.
$ npm init -y // package.json 파일 생성 $ npm i -D parcel-bundler // parcel-bundler 설치
1-2. package-json 파일 수정
package-json파일ㅇ에서script내에 아래와 같이parcel번들러를 이용하여 개발을 할 수 있도록 수정 합니다.
"scripts": { "dev": "parcel index.html", "build": "parcel build index.html" },
1-3.index.html 파일 설정
index.html파일과main.scss,main.js파일을 연결시켜줍니다.CSS를 초기화시켜주기 위해 reset css mdn으로 구글 검색하여 나온 아래 링크를SCSS링크 태그 위에 코딩해줍니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset css@5.0.1/reset.min.css">index.html
<!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 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>
main.scss
$color--black: #000; $color--white: #fff; body { background-color: $color--black; h1 { color: $color--white; } }
main.js
console.log("Hello Parcel!");
1-4.개발 서버 실행
npm을 통해 개발 서버를 실행 합니다.
$ npm run dev
일취월장(日就月將) - 「날마다 달마다 성장하고 발전한다.」