[Bundler] Parcel

Parcel

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

설치

$ npm i -D parcel-bundler

package.json

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

정적 파일 연결

설치

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

package.json

"staticFiles": {
  "staticPath": "static", /* copy할 디렉토리 이름 */
}

autoprefixer

자동으로 공급 업체 접두사(Vender Prefix)가 붙은 속성을 만들어줌

설치

$ npm i -D postcss autprefixer

package.json

"browserslist": [
  "> 1%", /* 점유율이 1% 이상인 브라우저 */
  "last 2 versions" /* 위에서 선택한 브라우저의 하위 2번째 버전까지 */
]

.postcssrc.js

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

NodeJS에서는 ESM(import,export)을 지원하지 않고 CommonJS(require,module.exports)을 지원한다.

babel

ES6이상의 문법으로 만들어진 JS를 ES5로 변환하는 트랜스컴파일러
package.json에 browserslist 추가해야 함

설치

$ npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

.babelrc.js

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

CLI

sava

parcel index.html

build

parcel build index.html

옵션
d [결과 디렉토리]: 결과 디렉토리 변경(기본값: dist)
--port [포트번호]: 포트번호 변경(기본값: 1234)
--open: 자동으로 브라우저 열기
--no-hmr: HMR 비활성
--no-cache: 파일시스템 캐시 비활성

HMR(Hot Module Replacement): 런타임에 페이지 새로고침 없이 수정된 내용을 자동으로 갱신하는 방식