1. .env 파일 생성: 프로젝트 루트 디렉토리에 .env 파일을 생성합니다. 이 파일은 환경 변수를 포함하는데 사용됩니다.

2. .env 파일에 변수 설정: .env 파일에 환경 변수를 설정합니다. 예를 들어, 다음과 같이 변수를 선언할 수 있습니다.

API_KEY=abc123
BASE_URL=https://www.example.com

1. Parcel 플러그인 설치: .env 파일을 사용하여 환경 변수를 로드하려면, Parcel 플러그인을 설치해야 합니다. parcel-plugin-env 플러그인은 이 기능을 제공합니다.

npm install parcel-plugin-env --save-dev

1. Parcel 설정 파일 수정: 프로젝트 루트 디렉토리에 있는 package.json 파일을 열고, scripts 항목 아래에 env를 추가합니다.

"scripts": {
  "env": "parcel build src/index.html --out-dir dist",
  "start": "parcel src/index.html"
}

1. 환경 변수 사용: 프로젝트 코드에서 환경 변수를 사용할 수 있습니다. 예를 들어, process.env를 사용하여 환경 변수에 액세스할 수 있습니다.

const apiKey = process.env.API_KEY;
const baseUrl = process.env.BASE_URL;

console.log(apiKey); // 'abc123'
console.log(baseUrl); // 'https://www.example.com'

위와 같이 환경 변수를 설정하고 사용할 수 있습니다. Parcel을 통해 환경 변수를 쉽게 세팅하여 프로젝트를 유연하게 관리할 수 있습니다.