[Parcel] - CLI 명령어

Yejin Yang·2022년 5월 7일
0

[Bundler]

목록 보기
6/11
post-thumbnail

CLI란?

가상 터미널 또는 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식

Pacel CLI 명령어

번들러는 개발용, 제품용 구분해서 사용해야 한다.

Serve

개발용 으로 사용할 때, 서버를 시작하는 명령어

$ parcel index.html

Build

제품화 용으로 사용할 때, 필요한 명령어 assets을 빌드한다.

$ parcel build index.html

옵션

결과물 디렉토리

기본값: "dist"
dist 폴더를 다른 이름으로 변경하고 싶을때 명령어

같이 사용 가능한 명령어: serve, watch, build

parcel build entry.js --out-dir build/output

혹은

parcel build entry.js -d build/output
- build
- - output
- - - entry.js

포트 번호

localhost 열 때 포트 번호를 변경할 때 사용하는 명령어

기본값: 1234
같이 사용 가능한 명령어: serve

parcel serve entry.js --port 1111

브라우저에서 열기

개발 서버 오픈 할때 자동으로 브라우저 열게 해주는 명령어

기본값: 비활성
같이 사용 가능한 명령어: serve

parcel entry.js --open

빠른 모듈 교체 비활성화

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

기본값: HMR 활성
같이 사용 가능한 명령어: serve, watch

parcel entry.js --no-hmr

파일시스템 캐시 비활성화

기본값: 캐시 활성
같이 사용 가능한 명령어: serve, watch, build

parcel build entry.js --no-cache

CLI 사용해보기

개발 포트 번호 변경

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

--port 3000 포트 번호를 3000으로 변경해주는 명령어

개발 서버 실행

$ npm run dev 

profile
Frontend developer

0개의 댓글