번들러 parcel 플러그인 사용법

 

 

---

Parcel

---

1. 컴파일러

scss 등의 파일을 자동 컴파일하는 기능

2. 브라우저

로컬환경에서 브라우저 연결 

3. 정적파일 복붙 📌

dist폴더에 자동 연결하는 플러그인 parcel-plugin-static-files-copy

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

parcel-plugin-static-files-copy

staticFiles 옵션

-> "static"이라는 이름의 폴더를 parcel패키지가 dist폴더로 복붙한다.

*개발서버에서는 dist폴더 내에 있는 index.html이 작동한다. favicon과 같은 파일은 dist폴더 내에 index.html파일 근처에 있어야 하기 때문에 파일 이동이 불가피한데 이때 dist폴더에 그냥 넣으면 dist파일은 언제든지 삭제될 수 있으며 gitignore대상이 될 수 있어 리스크가 크다. static files copy 플러그인은 말그대로 이미지와 같은 정적 파일들을 복사 붙여넣기 해주는 기능이다. 옵션에서 지정한 폴더(여기서는 static)에 해당 파일을 옮겨 담으면 원본은 static폴더 안에서 보존되면서 dist파일에는 자동 붙여넣기가 된다.

 

 

---

autoprefixer📌

---

공급 업체 접두사 Vender Prefix를 자동으로 붙여주는 모듈 postcss, autoprefixer

표준이 아닌 구형브라우저에서 적용가능하도록 webkit, ms 등 공급 업체의 접두사를 붙이는데 이 기능을 대신 해주는 플러그인이다.

$ npm i -D postcss autoprefixer

 

browserslist📌

---

npm프로젝트에서 지원할 브라우저의 범위를 명시하는 용도로 autoprefixer패키지가 이 옵션을 활용하게 된다.

-> 전세계 점유율이 1% 이상인 모든 브라우저에 한해서 최근 2버전까지 지원함을 의미

 

.postcssrc.js📌

---

◽ 파일 이름 설명

• 뒤에 rc(Runtime Configuration)가 붙은 파일 : 구성 파일
• 파일이름 앞에 .마침표가 붙는 파일 : 구성 옵션 또는 숨김 파일

◽ .postcssrc.js파일은 commonjs 방식으로 작성

브라우저에서 사용하지 않고 번들러로 변환하는 용도로만 사용하기 때문에 nodejs 환경에서 동작하기 때문에 commonjs방식을 사용한다.

• ESM : ECMAScript Module 방식 -> import와 export
• commonjs 방식 -> require()함수와 module.exports

// import autoprefixer from 'autoprefixer'
const autoprefixer = require('autoprefixer')

// export {
//   plugins: [
//     autoprefixer
//   ]
// }
module.exports = {
  plugins: [
    autoprefixer
  ]
}

코드를 더 줄여서 변수없이 사용

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

-> 제대로 잘 작동하는지 알아보려면 css파일에 display:flex(최신기술)를 적용했을 때 아래 그림과 같이 나온다.

 

 

---

Babel 📌

최신 문법으로 작성한 것을 구형브라우저에서도 잘 작동하도록 예전 문법으로 변환

---

ECMAScript 2015+ (ES6) 이상 코드를 이전 js 엔진에서 실행할 수 있는 이전 버전과 호환되는 js 버전으로 변환하는 데 사용되는 js 트랜스 컴파일러

 

설치

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

 

.babelrc.js

새 파일 .bablerc.js에 commonjs방식으로 작성

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

 

package.json

autoprefixer와 마찬가지로 package.json파일에서 browserslist옵션을 추가해줘야 한다.

-> 전세계 점유율이 1% 이상인 모든 브라우저에 한해서 최근 2버전까지 지원함을 의미

 

transform-runtime

async await 키워드(비동기 문법)를 사용할 수 있게끔 해주는 플러그인

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

 

.babelrc.js

위 플러그인 관련 옵션 추가

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

 

 

---

CLI

command line interface : 터미널 명령어

---

🖥 커맨드 라인 인터페이스(CLI)

개발용, 제품용으로 구분해서 사용