๐Ÿ–ฅ ์ปค๋งจ๋“œ ๋ผ์ธ ์ธํ„ฐํŽ˜์ด์Šค(CLI)

๋ช…๋ น์–ด

Serve

๊ฐœ๋ฐœ์šฉ ์„œ๋ฒ„๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์•ฑ์ด ์ˆ˜์ •๋˜๋ฉด ์ž๋™์œผ๋กœ ๋‹ค์‹œ ๋นŒ๋“œํ•˜๊ณ , ๋น ๋ฅธ ๊ฐœ๋ฐœ์„ ์œ„ํ•ด ๋น ๋ฅธ ๋ชจ๋“ˆ ๊ต์ฒด๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

parcel index.html

Build

์• ์…‹์„ ํ•œ ๋ฒˆ ๋นŒ๋“œํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ณผ์ •์—์„œ ์ฝ”๋“œ ์ตœ์†Œํ™”(๋ฏธ๋‹ˆํŒŒ์ด์ผ€์ด์…˜)๊ฐ€ ํ™œ์„ฑํ™”๋˜๊ณ  ํ™˜๊ฒฝ๋ณ€์ˆ˜๊ฐ€ NODE_ENV=production ๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค. ํ”„๋กœ๋•์…˜์—์„œ ๋ณด๋‹ค ์ž์„ธํ•œ ๋‚ด์šฉ์„ ํ™•์ธํ•˜์„ธ์š”.

parcel build index.html

Watch

watch ๋ช…๋ น์–ด๋Š” serve ๋ช…๋ น์–ด์™€ ๋น„์Šทํ•˜์ง€๋งŒ ์„œ๋ฒ„๋ฅผ ์‹œ์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์ด ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

parcel watch index.html

Help

๊ฐ€๋Šฅํ•œ ๋ชจ๋“  CLI ์˜ต์…˜์„ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค.

parcel help

Version

Parcel ์˜ ๋ฒ„์ „์„ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค.

parcel --version

์˜ต์…˜

๊ฒฐ๊ณผ๋ฌผ ๋””๋ ‰ํ† ๋ฆฌ

๊ธฐ๋ณธ๊ฐ’: "dist"

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch, build

parcel build entry.js --out-dir build/output
# ํ˜น์€
parcel build entry.js -d build/output
root
- build
- - output
- - - entry.js

์„œ๋น™๋  public URL ์„ค์ •

๊ธฐ๋ณธ๊ฐ’: --out-dir ์˜ต์…˜๊ณผ ๊ฐ™์Œ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch, build

parcel entry.js --public-url ./dist/

๊ฒฐ๊ณผ๋ฌผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‚˜์˜ต๋‹ˆ๋‹ค.

<link rel="stylesheet" type="text/css" href="/dist/entry.1a2b3c.css">
<!-- or -->
<script src="/dist/entry.e5f6g7.js"></script>

ํƒ€๊ฒŸ

๊ธฐ๋ณธ๊ฐ’: browser

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch, build

parcel build entry.js --target node

๊ฐ€๋Šฅํ•œ ํƒ€๊ฒŸ: node, browser and electron

์บ์‹œ ๋””๋ ‰ํ† ๋ฆฌ

๊ธฐ๋ณธ๊ฐ’: ".cache"

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch, build

parcel build entry.js --cache-dir build/cache

ํฌํŠธ ๋ฒˆํ˜ธ

๊ธฐ๋ณธ๊ฐ’: 1234

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve

parcel serve entry.js --port 1111

๋กœ๊ทธ ๋ ˆ๋ฒจ ๋ณ€๊ฒฝ

๊ธฐ๋ณธ๊ฐ’: 3

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch, build

parcel entry.js --log-level 1
๋กœ๊ทธ ๋ ˆ๋ฒจ ํšจ๊ณผ
0 ๋กœ๊น… ๋น„ํ™œ์„ฑํ™”
1 ์—๋Ÿฌ๋งŒ ๋กœ๊ทธ
2 ์—๋Ÿฌ์™€ ๊ฒฝ๊ณ ๋ฅผ ๋กœ๊ทธ
3 ๋ชจ๋‘ ๋กœ๊น…

๋น ๋ฅธ ๋ชจ๋“ˆ ๊ต์ฒด ํ˜ธ์ŠคํŠธ๋„ค์ž„

๊ธฐ๋ณธ๊ฐ’: ํ˜„์žฌ ์ฐฝ์˜ location.hostname

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch

parcel entry.js --hmr-hostname parceljs.org

๋น ๋ฅธ ๋ชจ๋“ˆ ๊ต์ฒด ํฌํŠธ

๊ธฐ๋ณธ๊ฐ’: ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋žœ๋ค ํฌํŠธ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch

parcel entry.js --hmr-port 8080

๊ฒฐ๊ณผ๋ฌผ ํŒŒ์ผ๋ช…

๊ธฐ๋ณธ๊ฐ’: ์›๋ž˜ ํŒŒ์ผ๋ช…

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch, build

parcel build entry.js --out-file output.html

์ด ์˜ต์…˜์€ ์ง„์ž…์  ๋ฒˆ๋“ค์˜ ๊ฒฐ๊ณผ ํŒŒ์ผ๋ช…์„ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.

์ƒ์„ธ ๋ณด๊ณ ์„œ๋ฅผ ์ถœ๋ ฅ

๊ธฐ๋ณธ๊ฐ’: ๊ฐ„๋‹จํ•œ ๋ณด๊ณ ์„œ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: build

parcel build entry.js --detailed-report

HTTPS ํ™œ์„ฑํ™”

๊ธฐ๋ณธ๊ฐ’: https ๋น„ํ™œ์„ฑ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch (HMR ์—ฐ๊ฒฐ์„ ์œ„ํ•ด HTTPS ๋กœ ์ˆ˜์‹ )

parcel entry.js --https

โš ๏ธ ์ด ์˜ต์…˜์€ ์ž๊ฐ€์„œ๋ช…๋œ ์ธ์ฆ์„œ๋ฅผ ์ƒ์„ฑํ•˜๋ฏ€๋กœ ์‚ฌ์šฉ์„ ์œ„ํ•ด์„œ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ localhost ์— ๋Œ€ํ•ด ์ž๊ฐ€์„œ๋ช…๋œ ์ธ์ฆ์„œ๋ฅผ ํ—ˆ์šฉํ•˜๋„๋ก ์„ค์ •ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž„์˜์˜ ์ธ์ฆ์„œ ์„ค์ •

๊ธฐ๋ณธ๊ฐ’: https ๋น„ํ™œ์„ฑ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch

parcel entry.js --cert certificate.cert --key private.key

๋ธŒ๋ผ์šฐ์ €์—์„œ ์—ด๊ธฐ

๊ธฐ๋ณธ๊ฐ’: ๋น„ํ™œ์„ฑ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve

parcel entry.js --open

์†Œ์Šค๋งต ๋น„ํ™œ์„ฑํ™”

๊ธฐ๋ณธ๊ฐ’: ์†Œ์Šค๋งต ํ™œ์„ฑ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch, build

parcel build entry.js --no-source-maps

์ž๋™์„ค์น˜ ๋น„ํ™œ์„ฑํ™”

๊ธฐ๋ณธ๊ฐ’: ์ž๋™์„ค์น˜ ํ™œ์„ฑ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch

parcel entry.js --no-autoinstall

๋น ๋ฅธ ๋ชจ๋“ˆ ๊ต์ฒด ๋น„ํ™œ์„ฑํ™”

๊ธฐ๋ณธ๊ฐ’: HMR ํ™œ์„ฑ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch

parcel entry.js --no-hmr

์†Œ์Šค ์ตœ์†Œํ™”(๋ฏธ๋‹ˆํŒŒ์ด์ผ€์ด์…˜) ๋น„ํ™œ์„ฑํ™”

๊ธฐ๋ณธ๊ฐ’: ์†Œ์Šค ์ตœ์†Œํ™” ํ™œ์„ฑ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: build

parcel build entry.js --no-minify

ํŒŒ์ผ์‹œ์Šคํ…œ ์บ์‹œ ๋น„ํ™œ์„ฑํ™”

๊ธฐ๋ณธ๊ฐ’: ์บ์‹œ ํ™œ์„ฑ

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch, build

parcel build entry.js --no-cache

๋ชจ๋“ˆ์„ UMD ๋กœ ์ถœ๋ ฅ

๊ธฐ๋ณธ๊ฐ’: ๋น„ํ™œ์„ฑํ™”

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: serve, watch, build

parcel serve entry.js --global myvariable

์‹คํ—˜๋‹จ๊ณ„์˜ ์Šค์ฝ”ํ”„ ํ˜ธ์ด์ŠคํŒ…(scope hoisting)/ํŠธ๋ฆฌ ์…ฐ์ดํ‚น(tree shaking) ์ง€์› ํ™œ์„ฑํ™”

๊ธฐ๋ณธ๊ฐ’: ๋น„ํ™œ์„ฑํ™”

๊ฐ™์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์–ด: build

parcel serve entry.js --experimental-scope-hoisting

๋” ์ž์„ธํ•œ ์ •๋ณด๋Š” Devon Govett ์ด Parcel 1.9 ์— ๋Œ€ํ•ด ์ž‘์„ฑํ•œ ๊ธ€์˜ Tree Shaking section(์˜๋ฌธ)์„ ์ฐธ์กฐํ•˜์„ธ์š”.

๋ฌธ์„œ์˜ ๊ฐœ์„ ์„ ๋„์™€์ฃผ์„ธ์š”

๋น ์ง„์ ์ด ์žˆ๊ฑฐ๋‚˜ ๋ช…ํ™•ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ, ์›น ์‚ฌ์ดํŠธ ์ €์žฅ์†Œ์— ์ด์Šˆ๋ฅผ ์ œ๊ธฐํ•ด ์ฃผ์‹œ๊ฑฐ๋‚˜ ํŽ˜์ด์ง€๋ฅผ ์ˆ˜์ •ํ•ด ์ฃผ์„ธ์š”..