1. 번들러 개요

• Parcel
• Webpack
• Rollup

web에서 동작할 수 있도록 변환해주는 역할

• HTML, CSS, JS
• 외부의 패키지의 도움을 받아서 변환(수동의 작업을 대신 해줌)

---

Parcel

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

Webpack

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

2. 프로젝트 생성

reset css

reset-css CDN by jsDelivr - A CDN for npm and GitHub

3. 정적 파일 연결

favicon 생성

ICO Converter

parcel plugin static files copy

• static pile에 접근하여 dist에 복사되도록 도와주는 플러그인(파비콘)

parcel-plugin-static-files-copy

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

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

4. autoprefixer

Vender Prefix

• 공급 업체 접두사

npm i -D postcss autoprefixer

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

- 전세계의 점유율이 1%인 모든 브라우저 + 마지막 2개버전 까지.

browserslist

• 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도입니다. 그 명시를 Autoprefixer 패키지가 활용하게 됩니다.
• 어떤 브라우저에 서비스를 제공할 지 꼭 명시하기!

.postcssrc.js

• 앞에 . 이 붙으면 숨김파일
• browser에서 작동하는 것이 아닌 Node.js에서 작동.
• CommonJs 방식 사용

버전 충돌 시 다운그레이드 해주기

• autoprefixer vs postcss

npm i -D autoprefixer@9

5. babel

• Babel은 주로 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러(변환)입니다

• ES6, ES7, ES8 ===(BABEL)== > ES5(구형)

  Babel · The compiler for next generation JavaScript

npm i -D @babel/core @babel/preset-env

// .babelrc.js
module.exports = {
  presets: ['@babel/preset-env']
}

// package.json 에 이 내용이 꼭 있어야 함!
 "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

• async function 시 래퍼런스 오류를 막기 위해 plugin 설치

npm i -D @babel/plugin-transform-runtime

// babel에 추가

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}