Parcel의 커맨드 라인 인터페이스(CLI) 🎨

🎨 CLI (Commend Line Interface)

CLI는 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식으로 문자열 명령을 입력하는 것을 말한다.
다음 링크에 들어가 Parcel의 CLI를 구체적으로 확인할 수 있으며 그 중 중요한 몇 가지에 대해 알아보자
https://ko.parceljs.org/cli.html

Serve

개발용 서버를 시작하는 명령어로 앱이 수정되면 자동으로 다시 빌드하고, 빠른 개발을 위해 빠른 모듈 교체를 지원한다.

parcel index.html

Build

제품화할 때 사용하는 명령어로, assets을 한 번 빌드한다.
이 과정에서 코드 최소화(미니파이케이션)가 활성화되고 환경변수가 NODE_ENV=production 로 설정된다.

parcel build index.html

결과물 디렉토리

기본값은 dist이며 다른 폴더명으로 변경을 원할 때 사용하는 명령어입니다.
build/output 부분에 dist를 대신할 폴더 구조를 명시하면 된다.

parcel build entry.js --out-dir build/output
  //또는
  parcel build entry.js -d build/output

포트 번호

기본값은 1234인데 개발 서버 오픈 시에 포트 번호를 변경할 때 사용하는 명령어로 숫자를 바꿀 수 있다.

parcel serve index.html --port 0605

브라우저에서 열기

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

parcel index.html --open

빠른 모듈 교체 비활성화

기본값은 HMR (Hot Module Replacement) 활성이며 런타임에 페이지 새로고침 없이 수정된 내용을 자동으로 갱신하는 방식을 말한다.
필요하지 않다면 비활성화 시킬 수 있다.

parcel index.html --no-hmr

파일시스템 캐시 비활성화

기본값은 캐시 활성으로 이는 개발 서버를 열거나 제품화 할 때 캐시가 활성화 되어있어 빠르게 내용이 처리된다.
가끔 문제가 발생하는 상황도 있어 필요에 따라 비활성화할 수 있다.

적용하기

실제로 명령어를 추가하여 포트 번호를 바꿔보자
package.json 파일을 열고 dev에서 parcel index.html 뒤에 --port 0605 를 추가해보자.
그리고 npm run dev로 개발 서버를 열면 로컬 호스트의 번호가 0605로 바뀐 것을 확인할 수 있다.

그런데 Parcel bundler는 최대한 개발자가 따로 옵션을 제공하지 않고 자동화해서 동작시키는 것이 핵심 개념이기 때문에 필요에 따라서만 옵션을 수정하도록 하자