parcel-transformer-interpolate-html

HTML 파일에 환경변수를 대입하는 Parcel v2 플러그인

설치

npm i -D parcel-transformer-interpolate-html

yarn을 사용한다면

yarn add -D parcel-transformer-interpolate-html

.parcelrc 파일에 parcel-transformer-interpolate-html 플러그인을 추가합니다.
대입 후 원래 파이프라인에 따라 변환되어야 하므로 반드시 "..." 앞에 추가해야 합니다.

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{html,htm}": ["parcel-transformer-interpolate-html", "..."]
  }
}

환경변수는 .env 파일을 통해 지정할 수 있습니다.

*.html, *.htm 파일 내에서 %ENV%처럼 %로 감싸진 부분이 환경변수로 대체됩니다.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>%title%</title>
  </head>
</html>

.env

title=Example

빌드 결과 (parcel build index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Example</title>
  </head>
</html>