λΆˆκ½ƒ νŠ€κ²Œ λΉ λ₯΄κ³  섀정이 ν•„μš” μ—†λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜ λ²ˆλ“€λŸ¬

μ‹œμž‘ν•˜κΈ° GitHub

πŸš€ λΆˆκ½ƒ νŠ€κ²Œ λΉ λ₯Έ λ²ˆλ“€

Parcel은 μ›Œμ»€ ν”„λ‘œμ„ΈμŠ€λ₯Ό μ΄μš©ν•˜μ—¬ λ©€ν‹°μ½”μ–΄ μ»΄νŒŒμΌμ„ κ°€λŠ₯μΌ€ ν•˜κ³ , 심지어 μž¬μ‹œμž‘ 후라 해도 λΉ λ₯Έ λ¦¬λΉŒλ“œλ₯Ό ν•  수 μžˆλ„λ‘ νŒŒμΌμ‹œμŠ€ν…œ μΊμ‹œλ₯Ό κ°–κ³  μžˆμŠ΅λ‹ˆλ‹€.

πŸ“¦ λͺ¨λ“  μ• μ…‹ λ²ˆλ“€

Parcel은 JS, CSS, HTML, 파일 μ• μ…‹, κ·Έ μ™Έ λ§Žμ€ 것듀에 λŒ€ν•œ 지원을 μ¦‰μ‹œ μ œκ³΅ν•©λ‹ˆλ‹€. ν”ŒλŸ¬κ·ΈμΈ μ—†μ΄μš”.

🐠 μžλ™ λ³€ν™˜

ν•„μš”ν•˜λ‹€λ©΄ Babel, PostCSS, PostHTML을 μ‚¬μš©ν•˜λŠ” μ½”λ“œλŠ” μžλ™μœΌλ‘œ λ³€ν™˜λ©λ‹ˆλ‹€. 심지어 node_modulesκΉŒμ§€λ„.

βœ‚οΈ μ„€μ • μ—†λŠ” μ½”λ“œ λΆ„ν• 

Parcel은 동적 import()문을 μ‚¬μš©ν•΄μ„œ 좜λ ₯ λ²ˆλ“€μ„ λΆ„ν•  ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό 톡해 초기 λ‘œλ“œμ‹œ ν•„μš”ν•œ κ²ƒλ“€λ§Œ λ‘œλ“œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

πŸ”₯ ν•« λͺ¨λ“ˆ λ¦¬ν”Œλ ˆμ΄μŠ€λ¨ΌνŠΈ

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μ—μ„œ λΉŒλ“œλ¨.