Parcel-bundler 프로젝트 세팅

Parcel-bundler란?

Parcel은 웹 애플리케이션을 번들링하기 위한 무료 오픈 소스 JavaScript 번들러입니다. 번들링은 여러 개의 파일을 하나의 파일로 묶는 것을 의미합니다. Parcel은 브라우저 환경에서 자바스크립트, CSS, HTML 등을 포함한 파일들을 번들링하고, 빠르고 간단하며 기능이 풍부한 방식으로 작동합니다. 이러한 이유로 많은 개발자들이 Parcel을 선호하며, 리액트와 같은 프레임워크에서도 기본적으로 사용되는 번들러 중 하나입니다.

parcel-bundler 프로젝트 생성

• npm 프로젝트 시작

npm init -y

→ package.json 파일이 생성된다

• parcel bundler 설치

npm install -dev parcel-bundler

‘-dev’ 뜻은 개발 환경 옵션에서만 parcel-bundler를 사용하겠다는 말

• script 코드 추가

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

html에 css 파일을 삽입하지 않아도,

js에 import 함으로써 css를 적용시킬 수 있다

main.js

import './main.css';

const h1 = document.createElement('h1');
h1.innerHTML = "HELLO I'M H1";
document.body.appendChild(h1);

build 이후에는 폴더 내에 dist 폴더가 생성된다

배포용으로 만들어지는 파일들이 있다

• sass 사용
• 외부 자바스크립트를 이용할 수 있는 모듈을 사용해보겠다

1. sub.js 생성

sub.js

const sub = (name) => {
  const h2 = document.createElement('h2');
  h2.innerText = name;
  document.body.appendChild(h2);
}

export default sub;

main.js

import './main.scss';
import sub from './sub.js';

const h1 = document.createElement('h1');
h1.innerHTML = "Hello I'm h1";
document.body.appendChild(h1);

sub('call sub');

• package.json 파일 수정

index.html 뿐만 아닌 다른 파일들도 실행하고 build 되게 하기 위해서 범윌을 변경하는 의미에서 코드를 수정한다

"scripts": {
    "dev": "parcel src/*.html",
    "build": "parcel build src/*.html"
  },

• 웹사이트 배포 build

웹사이트에 배포하기 위해서 build를 해보겠다

dist는 개발용으로 테스트하는 폴더

dist 폴더를 지워도, npm run build를 하면 다시 폴더가 생성된다

dist 폴더 안에 있는 파일들을 서버에 그대로 업로드하면 된다

일반적인 작고 소규모의 프로젝트에서는 parcel을 사용하면 되고, 큰 프로젝트에는 webpack bundler를 사용한다

해당 react library는 bundling 기능까지 포함되어 있기 때문에 react를 사용하기를 추천한다