[javascript] Parcel의 배포용 빌드 설정은 어떻게 하나요?

Parcel은 간편한 세팅과 함께 자동으로 번들링과 트랜스파일링을 처리해주는 번들러입니다. 우리는 Parcel을 사용하여 프로젝트를 개발했고 이제 배포를 위해 빌드 설정을 구성해야 합니다. 이를 위해 몇 가지 단계를 따라야 합니다.

  1. Parcel 설치

    먼저 Parcel을 설치해야 합니다. npm을 사용한다면 다음 명령을 실행하여 설치할 수 있습니다:

    npm install -g parcel-bundler
    

    yarn을 사용한다면 다음 명령을 실행하여 설치할 수 있습니다:

    yarn global add parcel-bundler
    
  2. 빌드 스크립트 작성

    프로젝트의 루트 디렉토리에 package.json 파일이 있을 것입니다. 이 파일에 “build” 스크립트를 추가하겠습니다. 이 스크립트는 빌드 명령을 실행할 때 Parcel을 호출합니다.

    다음과 같이 “scripts” 섹션을 열고 “build” 스크립트를 추가합니다:

    {
      "scripts": {
        "build": "parcel build src/index.html"
      }
    }
    

    이 예시에서는 src/index.html 파일이 엔트리 포인트일 것으로 가정합니다. 만약 엔트리 포인트가 다른 파일이라면 해당 파일 경로를 변경해야 합니다.

  3. 빌드 명령 실행

    이제 빌드 명령을 실행할 준비가 되었습니다. 프로젝트의 루트 디렉토리에서 다음 명령을 실행합니다:

    npm run build
    

    또는

    yarn build
    

    Parcel은 “build” 스크립트를 실행하여 프로젝트를 빌드하고 결과물을 dist 디렉토리에 저장합니다.

    필요에 따라 Parcel의 추가 설정을 사용하여 빌드를 커스터마이즈할 수 있습니다. Parcel의 공식 문서에서 자세한 내용을 확인할 수 있습니다.

해당 빌드 스크립트를 실행하면 프로젝트가 배포용으로 번들링되어 dist 디렉토리에 생성됩니다. 이제 배포된 코드를 웹서버나 호스팅 서비스에 업로드하여 사용할 수 있습니다.

참고 자료: