Parcel Bundler 튜토리얼

 

https://ko.parceljs.org/

0. Bundler 란?

프로젝트를 진행하다보면 여러가지 패키지를 설치하게 되는데 이런 패키지들은 개발할때만 사용되고 최종적으로 컴파일 후에는 html, css, javascript 파일만 남아야 한다. 때문에 이런 패키지들을 html, css, javascript 로 변환시켜 주는것이 번들러의 역할이다.

번들러가 모든 패키지들을 변환시킬 수 있는 것은 아니다. 예로 SCSS 를 설치하면 SASS 로 변환을 하는데 따로 설치할 필요는 없고 SCSS 를 설치할 때 같이 설치된다. 그리고 번들러는 이 설치된 SASS 를 통하여 변환을 시켜주는 역할을 하는 것이다.

 

그 중 Parcel 은 구성 없는 단순한 자동 번들링이 지원되어 소/중형 프로젝트에 적합한 번들러이다.

1. 설치 방법

npm i -D parcel-bundler

개발용 패키지이기 때문에 -D 옵션을 넣는다.

2. 명령어 설정

package.json 에 script 부분에 명령어를 추가한다.

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

• npm run dev : 개발용 서버 오픈시
• npm run build : 빌드시 사용

3. 추가로 설치하면 좋은 패키지

⭐️ parcel-plugin-static-files-copy

npm install -D parcel-plugin-static-files-copy

개발을 진행하면서 favicon.ico 같은 파일들을 dist 폴더에 직접 넣어주지 않고 static folder 를 설정하면 그 폴더 내의 파일들을 dist 폴더로 넣어주는 역할을 해준다.

// package.json
"staticFiles": {
    "staticPath": "static"
  }

⭐️ postcss & autoprefixer

개발자도구로 웹 스타일 탭을 보다보면 webkit 나 ms 가 붙은 속성을 볼 수 있다. 이런 속성들은 ms 같은 공급업체에서 시험적으로 볼 수 있도록 브라우저에서 제공하는 공급 업체 접두사(Vender Prefix)이다. ( 표준 기술을 사용하지 않는 구형 브라우저를 사용하는 경우에 필요할 수 있다 )

시험적이라는 말은 표준 기술이 아니라는 뜻이다. 때문에 이를 일일이 외우거나 찾아보며 입력하긴 힘들기 때문에 postcss, autoperefixer 패키지를 이용하여 자동으로 연결해주도록 한다.

 

1. 패키지 설치

npm install -D postcss autoprefixer

2.  package.json 설정

// package.json
"browserslist": [
    "> 1%", // 점유율이 1% 이상인 모든 브라우저 대상
    "last 2 versions" // 최근 2버전 까지 
  ]

3. postcssrc.js 설정

그리고 프로젝트 루트 경로에 .postcssrc.js 파일을 추가해준다.

ESM 이 아닌 CommonJS 방식으로 작성한다.(node.js 처럼)

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

❗️설치후 npm run dev 를 입력하면 (아마도)에러가 생길 것이다
이 에러는 autoprefixer 와 postcss 의 버전이 충돌이 생기는 에러기 때문에 postcss 버전에 맞추어 autoprefixer 의 버전을 호환이 되는 버전으로 다운그레이드 시켜주면 된다

npm i -D autoprefixer@9

=>설치 방법개발용 패키지이기 때문에 -D 옵션을 넣는다