1.3 Parcel, 개발 서버 실행과 빌드

package.json 파일에 scripts에 있는 test를 지우고 아래와 같이 변경해준다.

"scripts": {
    "dev": "pacel [배포할 파일]"
},

이후, 아래와 같이 입력하면 개발 서버를 실행할 수 있다.

npm run dev

parcel은 타입스크립트를 지원한다. 하지만 브라우저에서 타입스크립트가 직접 동작하지 않기때문에 parcel이라는 번들러가 자바스크립트 코드로 변환해준다.

parcel은 프로젝트에 사용된 여러가진 언어들을 브라우저에서 동작할 수 있도록 html, css, js로 변환해주는 역할을 하고 그것을 dist라는 폴더를 생성시켜 저장한다. 이 파일 또한, 개발 서버를 실행하면 다시 생성되기때문에 지워져도 문제가 없다.

실제 사용할 수 있도록 배포

"scripts": {
    "dev": "parcel [배포할 파일]",
		"build": "parcel build [배포할 파일]"
},

이와 같은 상황에서 build만 추가하면 에러가 발생한다.

package.json 파일에 main옵션에 적혀있는 index.js와 빌드할 파일에 다르다는 의미로 main을 맞게 변경해주거나 필요가 없다면 지워주면 된다.

npm run build

터미널에 위 코드를 입력하면 실제 배포되고 개발 서버를 띄었을 때와는 다르게 dist 폴더 안에 파일들이 용량을 줄이기 위해 띄어쓰기, 줄바꿈등이 없이 난독화되어 저장된다.