Bundler[Parcel] - CLI

01.CLI란?

• 명령 줄 인터페이스 CLI, 커맨드 라인 인터페이스 또는 명령어 인터페이스는 가상 터미널 또는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다.

• 참고 사이트
  Parcel 한국어판

02.Parcel-bundler CLI

명령어

2-1.Serve

$ parcel index.html

• 개발용 서버를 시작하는 명령어입니다.

2-2.Build

$ parcel build index.html

• assets을 빌드합니다.
• 제품화하는 과정에서 필요한 명령어입니다.

옵션

• package.json 파일의 옵션을 변경하는 명령어입니다.

2-3.결과물 디렉토리

$ parcel build entry.js --out-dir build/output
# 혹은
$ parcel build entry.js -d build/output
2. 포트 번호

• 기본값은 dist이며 다른 폴더명으로 변경을 원할 때 사용하는 명령어입니다.

2-4.포트 번호

$ parcel serve index.html --port 1111

• 기본값은 1234이며 개발 서버 오픈 시에 포트 번호를 변경할 때 사용하는 명령어입니다.

2-5.브라우저에서 열기

$ parcel index.html --open

• 기본값은 비활성이며 아래 명령어를 통해 개발 서버를 오픈하게 되면 자동으로 브라우저에 연결되게 됩니다.

2-6.빠른 모듈 교체 비활성화

$ parcel index.html --no-hmr

• 기본값은 HMR 활성이며 이는 Hot Module Replacement의 약자로 런타임에 페이지 새로고침 없이 수정된 내용을 자동으로 갱신하는 방식이며 이를 활성화한다는 의미입니다.
• 해당 명령어를 통해 이를 비활성화할 수 있습니다.

2-7.파일시스템 캐시 비활성화

$ parcel build entry.js --no-cache

• 기본값은 캐시 활성이며 이는 개발 서버를 오픈하거나 제품화를 할 때 캐시가 활성화 되어있어 더 빠르게 내용이 처리될 수 있습니다.
• 그러나 이러한 경우 때때로 문제가 발생하는 상황도 있으므로 필요에 따라 해당 명령어를 통해 비활성화할 수 있습니다.

03.Parcel-bundler CLI 옵션 사용

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

• package.json 파일에서 scripts에 dev 속성에서 포트번호를 변경하는 옵션을 작성 해줍니다.

• npm run dev 명령으로 개발 서버를 실행하면 포트번호가 1216으로 바뀐것을 확인할 수 있습니다.