N
(TIL)Parcel 번들러 본문
번들러
다양한 파일(HTML, CSS, JS, image, ico, sass 등...)을 묶어 실제로 웹 브라우저가 실행할 수 있도록 결과물을 만드는 일종의 도구
Parcel
- 설치할 패키지 및 구성 옵션을 신경쓰지 않고 최소한의 노력으로 하나의 프로젝트를 시작할 수 있다.
- 세밀한 번들러 재현은 불가능하다.
- Vue 파일을 브라우저가 읽을 수 있도록 변환시켜 준다.
- 진입점을 설정하면 필요한 패키지를 자동으로 설치해 준다.
- 개발용과 빌드용이 존재하며, scripts에서 설정한다.
- Build(배포용) : 결과물만 나오기 때문에 서버가 실행되지 않는다.
- Dev(개발용) : 개발용 서버가 열려 실행된다.
- Node.js 버전은 v14 이상이 필요하다.
해보기 전, nvm이 PC에 설치되어 있어야 한다.
node.js가 설치되어 있다면 node.js를 지우고 nvm을 설치한 후 다시 node.js를 설치하도록 하자!
또한, 운영체제에 따라 nvm이 다르기 때문에 OS에 맞춰 설치해야 한다.
DO
1. 터미널에 npm init -y 입력하면 현재 경로에 package.json과 package-lock.json이 만들어진다.
2. package.json 파일에서 scripts를 아래와 같이 변경
"scripts": {
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html"
}3. 터미널에 몇가지 패키지를 설치한다.
npm i vue
npm i -D parcel sass @parcel/transformer-vue
4. package.json을 확인하면 dependencies에 vue가, devDependencies에는 3가지의 패키지가 설치된다.
(터미널에 -D 옵션을 사용하면 개발용 의존성을 가지는 패키지가 설치된다.)
5. 현재 경로에 src 폴더를 만들고 그 안에 App.vue, index.html, main.js 파일을 만든다.
6. 각 파일에 코드를 작성해보자!
// App.vue 파일
<template lang="">
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: "Hello!",
};
},
};
</script>
<style lang="scss">
$color: orange;
h1 {
color: $color;
}
</style>// 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>Document</title>
<script type="module" src="./main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>// index.js 파일
import * as Vue from "vue";
import App from "./App.vue";
Vue.createApp(App).mount("#app");
7. 터미널에 npm run dev 를 입력하면 local host port로 접속할 수 있으며, 결과물을 얻을 수 있다.
또한, App.vue 에서 msg를 변경하면 즉각 적용되는 모습을 확인할 수 있다.
8. 터미널에 npm run build를 입력하면 서버는 열리지 않고, dist 폴더가 만들어지며 내부에는 index~.html 파일이 만들어지는 것을 확인할 수 있으며, 최적화된 코드로 작성된 것을 확인할 수 있다.
'TIL' 카테고리의 다른 글
| (TIL Day27)CSS- 선택자 (0) | 2021.09.07 |
|---|---|
| (TIL 26일차)CSS 심화 강의를 듣고... (0) | 2021.09.06 |
| (TIL Study)Promise (0) | 2021.08.26 |
| (TIL) 21/08/20 회고록 (0) | 2021.08.20 |
| (TIL)JS로 토글 버튼 만들기 (0) | 2021.08.18 |
