불꽃 튀게 빠르고 설정이 필요 없는 웹 애플리케이션 번들러

시작하기 GitHub

🚀 불꽃 튀게 빠른 번들

Parcel은 워커 프로세스를 이용하여 멀티코어 컴파일을 가능케 하고, 심지어 재시작 후라 해도 빠른 리빌드를 할 수 있도록 파일시스템 캐시를 갖고 있습니다.

📦 모든 애셋 번들

Parcel은 JS, CSS, HTML, 파일 애셋, 그 외 많은 것들에 대한 지원을 즉시 제공합니다. 플러그인 없이요.

🐠 자동 변환

필요하다면 Babel, PostCSS, PostHTML을 사용하는 코드는 자동으로 변환됩니다. 심지어 node_modules까지도.

✂️ 설정 없는 코드 분할

Parcel은 동적 import()문을 사용해서 출력 번들을 분할 할 수 있습니다. 이를 통해 초기 로드시 필요한 것들만 로드할 수 있습니다.

🔥 빠른 모듈 교체(HMR)

Parcel은 설정 없이 자동으로 개발중의 변화를 갱신하여 브라우저에 나타냅니다.

🚨 친절한 에러 로그

Parcel은 오류 발생시 도움이 되도록 문제를 정확히 집어주는 구문 강조 코드 프레임을 출력합니다.

Hello World

애플리케이션을 위한 진입 HTML 파일로 시작하세요. Parcel이 의존성을 따라 전체 앱을 빌드합니다.

✏️ index.html

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

🛠 index.js

// 다른 컴포넌트 임포트
import main from './main';

main();

🛠 main.js

// CSS 모듈 임포트
import classes from './main.css';

export default () => {
  console.log(classes.main);
};

💅 main.css

.main {
  /* 이미지 파일 참조 */
  background: url('./images/background.png');
  color: red;
}

parcel index.html로 개발용 서버를 구동하세요. JavaScript, CSS, images, 그 밖에 다양한 것들이 제대로 임포트 될겁니다! 👌

벤치마크

번들러 시간
browserify 22.98초
webpack 20.71초
parcel 9.98초
parcel - 캐시 사용 2.64초

무리 없는 크기, 1726개의 module을 포함한, 미 압축 6.5M의 app 기준. 4개의 물리 CPU가 있는 2016형 MacBook Pro에서 빌드됨.