vue 파일들을 브라우저가 알 수 있게 js 파일(in dist폴더)로 변환해줌
⇒ 변환된 dist(=distribution, 배포)만 배포하면 됨
⇒ 우리가 코드를 작성하는 src 폴더 이하는 only 개발용이다
⇒ parcel은 구성 옵션이 없는 번들러를 지향, 빠른 실행을 하게 해줌. (연습용 프로젝트에서 많이 쓰임)
but) 세밀한 변환은 불가 ⇒ webpack으로 대응(실무에서 많이 쓰임)
parcel 설치 및 실행
npm i -D parcel로 설치
- parcel 실행 명령어를 package.json scripts에 등록
- dev 용 명령어 :
parcel 진입점경로 - 서버도 자동으로 실행되고, 코드가 난독화x ⇒ 주석이나 변수명이 알아보기 쉽게 정리되어 있음
- prod 용 명령어 :
parcel build 진입점경로 - 번들링 파일을 한번 만들고 종료됨, 코드가 난독화 ⇒ 브라우저만 알아 볼 수 있음. 불필요한 코드가 제거되어 용량과 보안면에 좋음
- 진입점은 index.html
npm run 명령어로 parcel 실행- dist에 변환된 파일들이 놓여진다. ⇒ 실행할 때마다 생기므로 git에 업로드할 필요 x
- parcel이 진입점을 통해 모듈들을 파악해서 필요한 패키지를 의존성에 자동으로 추가해준다
- 모든 의존 패키지를 추가해주는 것은 아니다. 설치해줘야 하는 패키지는 실행 시 에러로 확인 가능함
- prod로 실행했을 때 package.json에 main으로 진입점을 표시한 것을 제거해야 충돌이 나지 않음
- parcel을 쓴다면, 진입점 html 파일에서
<script type="module" src="./main.js" />형태로 스크립트를 가져와야 한다
- dist 폴더에 dev↔prod로 바꿔 실행한다면, 캐시 삭제하고 다시 parcel 실행
vue 파일의 구조
- template : html 구조
- script : 컴포넌트 구조
- style : css 구조
<template> <h1>{{ msg }}</h1> </template> <script> export default { data() { return { msg: 'Hello!' } } } </script> <style lang="sass"> $orange: orange; h1 { color: $orange } </style>
style에서 sass 사용하기
<style lang="sass">로 내부 코드에서 scss 문법을 사용할 수 있다
- sass는 parcel이 자동 설치해주지 않기 때문에,
npm i -D sass로 직접 설치해줘야 한다
- parcel이 코드를 확인하면서 scss를 css로 변환해준다