Parcel은 간편한 세팅과 함께 자동으로 번들링과 트랜스파일링을 처리해주는 번들러입니다. 우리는 Parcel을 사용하여 프로젝트를 개발했고 이제 배포를 위해 빌드 설정을 구성해야 합니다. 이를 위해 몇 가지 단계를 따라야 합니다.
-
Parcel 설치
먼저 Parcel을 설치해야 합니다. npm을 사용한다면 다음 명령을 실행하여 설치할 수 있습니다:
npm install -g parcel-bundler
yarn을 사용한다면 다음 명령을 실행하여 설치할 수 있습니다:
yarn global add parcel-bundler
-
빌드 스크립트 작성
프로젝트의 루트 디렉토리에
package.json
파일이 있을 것입니다. 이 파일에 “build” 스크립트를 추가하겠습니다. 이 스크립트는 빌드 명령을 실행할 때 Parcel을 호출합니다.다음과 같이 “scripts” 섹션을 열고 “build” 스크립트를 추가합니다:
{ "scripts": { "build": "parcel build src/index.html" } }
이 예시에서는
src/index.html
파일이 엔트리 포인트일 것으로 가정합니다. 만약 엔트리 포인트가 다른 파일이라면 해당 파일 경로를 변경해야 합니다. -
빌드 명령 실행
이제 빌드 명령을 실행할 준비가 되었습니다. 프로젝트의 루트 디렉토리에서 다음 명령을 실행합니다:
npm run build
또는
yarn build
Parcel은 “build” 스크립트를 실행하여 프로젝트를 빌드하고 결과물을
dist
디렉토리에 저장합니다.필요에 따라 Parcel의 추가 설정을 사용하여 빌드를 커스터마이즈할 수 있습니다. Parcel의 공식 문서에서 자세한 내용을 확인할 수 있습니다.
해당 빌드 스크립트를 실행하면 프로젝트가 배포용으로 번들링되어 dist
디렉토리에 생성됩니다. 이제 배포된 코드를 웹서버나 호스팅 서비스에 업로드하여 사용할 수 있습니다.
참고 자료: