Parcel

번들러

• typescript, scss, vue 등이 웹 브라우저에서 동작할 수 있도록 html, css, javascript로 변환해줌
• 실제로 변환은 외부 패키지를 이용해 수동으로 작업함
  • typescript, sass, postcss, @babel/core, vue-template-compiler 등 
• 이러한 수동의 작업을 번들러에게 위임하는 것

 

Parcel

• 구성 없는 단순한 자동 번들링
• 소/중형 프로젝트에 적합함

 

Webpack

• 구성이 매우 꼼꼼함
• 중/대형 프로젝트에 적합함

 

npm 프로젝트 시작

npm init -y

 

Parcel 설치

npm i -D parcel

 

package.json

"scripts": {
  "dev": "parcel index.html",
  "build": "parcel build index.html"
}

---

정적 파일 연결

• parcel 은 dist 폴더 아래에 프로젝트 파일을 생성함
• 기존 파일명에 해시기호가 붙어서 생성됨
• 파일명이 바뀌기 때문에 정적 파일의 경로로 찾을 수 없음

 

정적 파일 연결 플러그인 설치

// parcel 1
npm i -D parcel-plugin-static-files-copy

// parcel 2
npm i -D parcel-reporter-static-files-copy

 

.parcelrc (parcel 2)

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

 

package.json

"staticFiles" : {
  "staticPath" : "static"
}

• staticPath : 기존 정적 파일 폴더
• staticOutDir: dist 폴더 아래 정적 파일 폴더

---

autoprefixer

구형 브라우저에서도 최신 CSS 기술이 동작할 수 있도록 하는 패키지

공급 업체 접두사를 붙여줌

 

공급 업체 접두사 (Vender Prefix)

display: -webkit-box;
display: -ms-flexbox;
...

 

postcss, autoprefixer 패키지 설치

npm i -D postcss autoprefixer

 

package.json

"browserslist": [
  "> 1%",
  "last 2 versions"
]

• 점유율이 1% 이상인 브라우저의
• 마지막 2개 버전까지 지원하겠다는 의미

 

루트 경로에 .postcssrc.js 파일 생성

뒤에 rc(Runtime Configuration)가 붙은 파일 : 구성 파일을 의미함

앞에 .가 붙은 파일 : 구성 옵션 / 숨김 파일

 

.postcssrc.js

module.exports = {
  plugins: [require('autoprefixer')],
};

 

.gitignore

node_modules
.cache
.DS_Store
.parcel-cache
dist