parcel bundler

번들러 개요

기본적으로 우리는 HTML, CSS, JS를 사용해서 웹페이지를 만들 수 있습니다.

하지만 이 3개만 갖고 작업할 때는 비효율적인 부분이 존재합니다.

그래서 우리는 Sass, vue등을 사용해서 좀 더 쉽게 작업하려고 합니다.

Sass, vue 같은 경우 웹에서 바로 작동 안 됩니다.

번들러를 통해 웹에서 동작시킬 수 있는 형태로 바꿔줍니다.

 

그렇다고 해서 bundler이 자동 변환해주지 않습니다.

sass패키지를 통해 변환해주는 겁니다.

여러 패키지들을 일일히 제어하기 복잡해서 bundler가 대신 해주는 겁니다.

 

Parcel Bundler

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

 

프로젝트 생성

1. terminal --> npm init -y 명령 실행
2. terminal --> npm i parcel-bundler -D 명령 실행
3. package.json 파일에 "scripts" 부분 기존 내용 지우고, "dev": "parcel index.html", "build": "parcel build index.html" 작성
4. terminal --> npm run dev 명령 실행

 

정적 파일 연결

favicon 같은 경우, dist 폴더 안에 넣어야 표시됩니다.

dist 폴더는 언제든 지우고 다시 생성할 수 있어서

favicon을 자동으로 넣을 수 있는 플러그인을 사용해보겠습니다.

parcel-plugin-static-files-copy 참조

 

autoprefixer

내용을 보시면 display: flex외 위에 display: webkit-box;는 줄로 끄어 줬습니다.

표준기술이 나오기 전에 각 브라우저 개발사에서 실험적으로 운행하기 위해

자기만의 기술을 사용했습니다.

webkit, ms등 접두사를 사용했습니다.

구형 브라우저에서도 정상적으로 구동할 수 있습니다.

 

공급 업체 접두사(Vender Prefix)를 자동으로 붙여주는 패키지가 있습니다.

npm i -D postcss autoprefixer 을 통해 패키지를 설치합니다.

package.json파일에서 위 캡처처럼 추가합니다.

browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의

범위를 명시하는 용도입니다.

그 명시를 Autoprefixer 패키지가 활용하게 됩니다.

배열입니다. [ ] 사용한 것을 주의하세요.

전세계 1% 점유률 이상 차지한 브라우저의 최근 2개 버전을 지원하겠다는 뜻입니다.

 

그리고 .postcssrc.js 파일을 생성해줍니다.

import나 export는 EMS에 사용하는 문법입니다.

여기서 node.js 문법, 즉, CommonJS 문법을 사용해야 됩니다.

import대신 require()를 사용하고, export대신 module.exports = { } 를 사용해야 됩니ㅏㄷ.

 

babel

Babel은 ECMAScript 2015+(ES6) 코드를 이전 JS엔진에서 실행할 수 있는

이전 버전과 호환되느 JS버전으로 변환하는데 주로 사용됩니다.

npm i -D @babel/core @babel/preset-env 을 통해 패키지를 설치합니다.

package.json파일에서 위 캡처처럼 추가합니다.

전에 autoprefixer 패키지 설치할 때 추가했었으면 별도 추가 필요 없습니다.

그리고 .babelrc.js 파일을 생성해줍니다.

위와 같이 작성해줍니다.

 

npm i -D @babel/plugin-transform-runtime 을 통해 설치한 후

async, await등 키워드를 사용할 수 있습니다.

.babelrc.js 파일에 위 캡처처럼 추가합니다.

 

CLI

parcel CLI 참조

parcel에 관련된 명령어들의 문서입니다.

 

옵션들도 많습니다. 필요한 옵션을 수정해서 사용하면 됩니다.

빠른 모듈 교체(HMR, Hot Module Replacement)는 런타임에 페이지 새로고침없이

수정된 내용을 자동으로 갱신하는 방식을 말합니다.