CRA 없이 React 개발환경 구축하기 (Parcel편)

지난번에 CRA 없이 웹팩으로 리액트 개발환경 구축하는 글을 썼는데 이번엔 파셀에 도전해봤다.

Parcel은 불꽃 튀게 빠르고 설정이 필요 없는 웹 애플리케이션 번들러라는 소개답게 설정 파일이 없다! (물론 아예 없진 않다. 이건 후술...)

웹팩 대신 파셀을 사용하는 거니까 앞부분은 거의 똑같다. 역시 yarn 기준으로 설명

package.json 생성

일단 적당한 폴더를 만들고 아래 명령어로 package.json 파일을 생성한다.

yarn init -y

리액트 설치

yarn add react react-dom

바벨 설치

파셀에 내장되어 있기 때문에 필요 없다! .babelrc 파일을 만들어서 직접 설정할 수도 있지만 안 해도 파셀이 알아서 작동한다.

파셀 설치

yarn add parcel

웹팩은 로더와 플러그인을 설치하고 세팅해줬지만 파셀은 다 필요 없다. 기본적으로 다 알아서 해준다!

파셀 플러그인 설치

yarn add parcel-transformer-interpolate-html parcel-reporter-clean-dist

parcel-transformer-interpolate-html - html 파일에서 %ENV% 같은 템플릿 구문 사용 가능. 꼭 필요한 건 아니지만 CRA 기본 예제 파일에서 %PUBLIC_URL%을 사용하기 때문에 이를 변환하기 위해 설치. 파셀 v1에는 해당 기능을 하는 플러그인이 있었는데 v2엔 없어서 내가 만들었다ㅎㅎ
parcel-reporter-clean-dist - 빌드 전 빌드 폴더 안 내용을 정리하고 빌드

.parcelrc 생성

만약 플러그인을 설치 안 했다면 정말 아무 설정 파일도 없었겠지만 아쉽게도 플러그인을 설치하는 바람에 설정 파일이 하나 필요하게 됐다. 이 정도도 웹팩에 비하면야 뭐...

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

.env 생성

.env는 dotenv의 환경변수 파일이다. 파셀에 dotenv가 내장되어 있어 자동으로 .env 파일을 읽어 환경변수를 설정해준다.

PUBLIC_URL=.

이렇게 환경변수를 지정해두면 parcel-transformer-interpolate-html가 %PUBLIC_URL%을 .으로 교체한다.

리액트 컴포넌트 작성

그냥 CRA에서 기본으로 만들어주는 예제 파일을 그대로 복사한다. (src, public 폴더)

단, 예제 소스에서는 web-vitals을 사용하므로 이걸 추가로 설치해야 한다.

yarn add web-vitals

그리고 진입점이 index.js이고 번들링 후 index.html에 삽입되는 웹팩과 다르게 파셀은 진입점이 index.html이다. index.html에 index.js를 추가해야 파셀이 파일을 타고타고 가면서 알아서 번들링 한다.

<script type="module" src="../src/index.js"></script>

public/index.html 파일을 열고 위 부분을 </body> 위에 추가한다.

package.json에 source, scripts 추가

  // "main": "index.js",
  "source": "public/index.html",
  "scripts": {
    "start": "parcel -p 3000 --open",
    "build": "parcel build --dist-dir build --no-source-maps"
  }

"main" 필드가 있으면 파셀은 라이브러리로 인식하기 때문에 지워야 한다.

그리고 scripts에 진입점(public/index.html)을 추가할 수 있지만 이렇게 source 필드를 추가함으로써 진입점을 설정해줄 수 있다.

yarn start - 개발 서버를 실행해 프로젝트를 바로 확인. 주소는 http://localhost:3000/
yarn build - 빌드. 결과물은 build 폴더에 생성

놀랍게도 이걸로 끝이다.

처음에 파셀 자료를 찾았을 때 v1 자료만 있고 v2 자료가 없었다. 그래도 복잡한 설정이 전혀 없기 때문에 공식 홈페이지 문서만으로도 충분히 공부가 되었다. 다만 아직 플러그인 생태계가 부족해서 직접 만들어야 하는...