번들러 설치를 위해
yarn add -D parcel
이 파슬 번들러는 실제 브라우저에서 동작하는 것이 아닌 개발할 때만 사용하는 것이기에 -D 플래그를 세웁니다.
이 번들러가 최초로 어떤 파일을 기준으로 해서 번들을 시작할 것인지 명시해야함.
그때 개발용 서버를 오픈하는 명령과 실제 제품화해서 배포용으로 만드는 빌드 버전이 있음.
{
"name": "1_chapter_bonus",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "parcel ./index.html",
"build": "parcel build ./index.html"
},
"devDependencies": {
"parcel": "^2.10.3"
}
}
위와 같이 scripts에 개발용 명령과 빌드용 명령을 구별해 줍니다.
파슬 번들러가 사용할 수 있는 index.html 파일을 생성해 줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" defer src="./main.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
우리는 html에서 사용할 스크립트도 필요하기에 src=”./main.js”를 연결하고, main.js도 생성해 줍니다.
여기서 우리는 main.js를 import/export 를 사용할 것이기에 type=”module”도 설정해 줍니다.
추가로 html body에 존재하는 특정 태그를 자바스크립트로 사용하려면 defer 키워드도 있어야 합니다.
// main.js
console.log(123);
html 및 main.js를 간단하게 작성하여 실제 동작을 확인해보도록 합시다.