🚀 불꽃 튀게 빠른 번들
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에서 빌드됨.