๐Ÿ“š API

๋ฒˆ๋“ค๋Ÿฌ

๋ณด๋‹ค ๋ณต์žกํ•œ ์‚ฌ์šฉ์„ ์œ„ํ•ด(๊ฐ€๋ น ๋งค ๋นŒ๋“œ ํ›„ ์ž„์˜์˜ ํ”„๋กœ์„ธ์‹ฑ์„ ํ•ด์•ผํ•œ๋‹ค๋˜๊ฐ€) CLI ๋Œ€์‹  API ๋ฅผ ์ด์šฉํ•ด์„œ ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ์ดˆ๊ธฐํ™” ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ์˜ต์…˜์ด ์„ค๋ช…๋œ ์•„๋ž˜ ์˜ˆ์‹œ๋ฅผ ๋ณด์„ธ์š”.

const Bundler = require('parcel-bundler')
const Path = require('path')

// ์ง„์ž…์  ํŒŒ์ผ ์œ„์น˜
const file = Path.join(__dirname, './index.html')

// ๋ฒˆ๋“ค๋Ÿฌ ์˜ต์…˜
const options = {
  outDir: './dist', // ๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ์ด ์ €์žฅ๋  ๋””๋ ‰ํ† ๋ฆฌ. ๊ธฐ๋ณธ๊ฐ’์€ dist
  outFile: 'index.html', // ๊ฒฐ๊ณผ๋ฌผ์˜ ํŒŒ์ผ๋ช…
  publicUrl: './', // ์„œ๋ฒ„์ƒ์˜ ์œ„์น˜. ๊ธฐ๋ณธ๊ฐ’์€ '/'
  watch: true, // ํŒŒ์ผ ๋ณ€๊ฒฝ์„ ๊ฐ์ง€ํ•ด์„œ ๋ณ€๊ฒฝ์‹œ ๋‹ค์‹œ ๋นŒ๋“œํ• ์ง€ ์—ฌ๋ถ€. ๊ธฐ๋ณธ๊ฐ’์€ process.env.NODE_ENV !== 'production'
  cache: true, // ์บ์‹œ๋ฅผ ํ™œ์„ฑํ™”ํ• ์ง€ ์—ฌ๋ถ€. ๊ธฐ๋ณธ๊ฐ’์€ true
  cacheDir: '.cache', // ์บ์‹œ๋ฅผ ์ €์žฅํ•  ๋””๋ ‰ํ† ๋ฆฌ. ๊ธฐ๋ณธ๊ฐ’์€ .cache
  minify: false, // ํŒŒ์ผ ๋ฏธ๋‹ˆํŒŒ์ด์ผ€์ด์…˜. process.env.NODE_ENV === 'production'๋ฉด ํ™œ์„ฑํ™”๋จ.
  target: 'browser', // browser/node/electron, ๊ธฐ๋ณธ๊ฐ’์€ browser
  https: false, // ํŒŒ์ผ์„ https๋กœ ์„œ๋น™ํ• ์ง€ http๋กœ ํ• ์ง€ ์—ฌ๋ถ€. ๊ธฐ๋ณธ๊ฐ’์€ false
  logLevel: 3, // 3 = ๋ชจ๋“ ๊ฒƒ์„ ๋กœ๊น…, 2 = ๊ฒฝ๊ณ ์™€ ์—๋Ÿฌ๋ฅผ ๋กœ๊น…, 1 = ์—๋Ÿฌ๋งŒ ๋กœ๊น…
  hmrPort: 0, // HMR ์†Œ์ผ“์ด ๋Œ์•„๊ฐˆ ํฌํŠธ๋ฒˆํ˜ธ. ๊ธฐ๋ณธ๊ฐ’์€ ๋ฌด์ž‘์œ„์˜ ๋นˆ ํฌํŠธ (node.js์—์„œ 0์€ ๋ฌด์ž‘์œ„์˜ ๋นˆ ํฌํŠธ๋กœ ๋ฐฐ์ •๋จ)
  sourceMaps: true, // ์†Œ์Šค๋งต์„ ํ™œ์„ฑํ™”ํ• ์ง€ ์—ฌ๋ถ€. ๊ธฐ๋ณธ๊ฐ’์€ ํ™œ์„ฑํ™” (์•„์ง ๋ฏธ๋‹ˆํŒŒ์ด๋“œ ๋นŒ๋“œ์—์„  ์ง€์›๋˜์ง€ ์•Š์Œ)
  hmrHostname: '', // ๋น ๋ฅธ ๋ชจ๋“ˆ ๊ต์ฒด๋ฅผ ์œ„ํ•œ hostname.๊ธฐ๋ณธ๊ฐ’์€ ''
  detailedReport: false // ๋ฒˆ๋“ค, ์• ์…‹, ํŒŒ์ผ ํฌ๊ธฐ, ๋นŒ๋“œ ์‹œ๊ฐ„์„ ๋‹ด์€ ์ƒ์„ธํ•œ ๋ฆฌํฌํŠธ๋ฅผ ์ถœ๋ ฅ. ๊ธฐ๋ณธ๊ฐ’์€ false. ๋ฆฌํฌํŠธ๋Š” ์˜ค์ง watch๊ฐ€ ๋น„ํ™œ์„ฑ์ผ๋•Œ๋งŒ ์ถœ๋ ฅ๋จ
}

async function runBundle() {
  // ์ง„์ž…์  ์œ„์น˜์™€ ์˜ต์…˜์„ ์ œ๊ณตํ•ด์„œ ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ์ดˆ๊ธฐํ™”
  const bundler = new Bundler(file, options)

  // ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ์‹คํ–‰ํ•จ. ์ด๊ฒƒ์€ ๋ฉ”์ธ ๋ฒˆ๋“ค์„ ๋ฐ˜ํ™˜ํ•จ.
  // watch ๋ชจ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ์ด promise๋Š” ๋งค ๋นŒ๋“œ๋งˆ๋‹ค ํ˜ธ์ถœํ•˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ๋”ฑ ํ•œ ๋ฒˆ๋งŒ ํ˜ธ์ถœํ•˜๊ณ  ์ด๋ฒคํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ
  const bundle = await bundler.bundle()
}

runBundle()

์ด๋ฒคํŠธ

๋ชจ๋“  ๋ฒˆ๋“ค๋Ÿฌ ์ด๋ฒคํŠธ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค.

const bundler = new Bundler(...);
bundler.on('bundled', (bundler) => {
  // bundler๋Š” ๋ชจ๋“  ์• ์…‹๊ณผ ๋ฒˆ๋“ค์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ์ž์„ธํ•œ๊ฑด ๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.
});
// ์–ด๋””์„ ๊ฐ€ bundler.bundle() ๋ฅผ ํ˜ธ์ถœํ•จ
const bundler = new Bundler(...);
bundler.on('buildEnd', () => {
  // Do something...
});
// ์–ด๋””์„ ๊ฐ€ bundler.bundle() ๋ฅผ ํ˜ธ์ถœํ•จ

๋ฒˆ๋“ค

Bundle์€ Parcel ์ด ์• ์…‹์„ ํ•จ๊ป˜ ๋ฒˆ๋“ค๋งํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋ฉฐ, ๋ฒˆ๋“ค ํŠธ๋ฆฌ๋ฅผ ๋นŒ๋“œํ•˜๊ธฐ ์œ„ํ•ด ์ž์‹, ํ˜•์ œ ๋ฒˆ๋“ค์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

์†์„ฑ๋“ค

Tree

Bundle์€ parentBundle, childBundles, siblingBundles์„ ํฌํ•จํ•˜๊ณ , ์ด ๋ชจ๋“  ์†์„ฑ์€ ๋น ๋ฅด๊ฒŒ ๋ฒˆ๋“คํŠธ๋ฆฌ๋ฅผ ์ˆœํšŒํ•˜์—ฌ ๋งŒ๋“ค์–ด์ง‘๋‹ˆ๋‹ค.

๋งค์šฐ ๊ธฐ๋ณธ์ ์ธ ์• ์…‹ ํŠธ๋ฆฌ๋กœ ๋ฒˆ๋“ค ํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

์• ์…‹ ํŠธ๋ฆฌ

index.html๋Š” index.js์™€ index.css๋ฅผ ํ•„์š”๋กœ ํ•ฉ๋‹ˆ๋‹ค.

index.js๋Š” test.js์™€ test.txt๋ฅผ ํ•„์š”๋กœ ํ•ฉ๋‹ˆ๋‹ค.

index.html
-- index.js
 |--- test.js
 |--- test.txt
-- index.css
๋ฒˆ๋“ค ํŠธ๋ฆฌ:

index.html์€ ๋ฉ”์ธ ๋ฒˆ๋“ค์„ ์œ„ํ•ด ์ง„์ž… ์• ์…‹์œผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด ๋ฉ”์ธ ๋ฒˆ๋“ค์€ index.js๊ณผ index.css 2 ๊ฐœ์˜ ์ž์‹ ๋ฒˆ๋“ค์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๋‘˜ ๋‹ค html๊ณผ ๋‹ค๋ฅธ ํƒ€์ž…์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

index.js๋Š” test.js, test.txt ๋‘ ํŒŒ์ผ์„ ํ•„์š”๋กœ ํ•ฉ๋‹ˆ๋‹ค.

test.js์€ index.js ๋ฒˆ๋“ค์˜ ์• ์…‹์œผ๋กœ ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. index.js์™€ ๊ฐ™์€ ์—์ƒ› ํƒ€์ž…์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

test.txt๋Š” index.js์™€ ๋‹ค๋ฅธ ์• ์…‹ ํƒ€์ž…์ด๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฅผ ์œ„ํ•ด ์ƒˆ ๋ฒˆ๋“ค์ด ์ƒ์„ฑ๋˜๊ณ , ํ•ด๋‹น ๋ฒˆ๋“ค์€ index.js ๋ฒˆ๋“ค์˜ ์ž์‹์œผ๋กœ ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.

index.css๋Š” ๋‹ค๋ฅธ ์˜์กด์„ฑ์ด ์—†๊ณ , ์—”ํŠธ๋ฆฌ ์• ์…‹์—์„œ๋งŒ ์“ฐ์ž…๋‹ˆ๋‹ค.

index.css์™€ index.js ๋ฒˆ๋“ค์€ ๊ฐ™์€ ๋ถ€๋ชจ๋ฅผ ๊ฐ€์ง€๋ฏ€๋กœ ์„œ๋กœ์˜ ํ˜•์ œ ๋ฒˆ๋“ค ์ž…๋‹ˆ๋‹ค.

index.html
-- index.js (index.js์™€ test.js๋ฅผ ํฌํ•จ)
 |--- test.txt (test.txt๋ฅผ ํฌํ•จ)
-- index.css (index.css๋ฅผ ํฌํ•จ)

Middleware

๋ฏธ๋“ค์›จ์–ด๋Š” http ์„œ๋ฒ„์˜ ํ›…์œผ๋กœ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (์˜ˆ๋ฅผ ๋“ค์–ด express๋‚˜ node http).

Parcel ๋ฏธ๋“ค์›จ์–ด๋ฅผ express ์™€ ์‚ฌ์šฉํ•˜๋Š” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.

const Bundler = require('parcel-bundler')
const app = require('express')()

const file = 'index.html' // ์—”ํŠธ๋ฆฌ ํฌ์ธํŠธ๋กœ ์“ฐ์ผ ์ ˆ๋Œ€๊ฒฝ๋กœ๋ฅผ ์ ์Šต๋‹ˆ๋‹ค
const options = {} // ๊ฐ€๋Šฅํ•œ ์˜ต์…˜์€ API ๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”

// ํŒŒ์ผ๊ณผ ์˜ต์…˜์„ ์‚ฌ์šฉํ•ด ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ์ดˆ๊ธฐํ™”ํ•ฉ๋‹ˆ๋‹ค
const bundler = new Bundler(file, options)

// express๊ฐ€ ๋ฒˆ๋“ค๋Ÿฌ ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด express server๋ฅผ ๊ฑฐ์น˜๋Š” ๋งค ์š”์ฒญ์„ Parcel์ด ์ฒ˜๋ฆฌํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
app.use(bundler.middleware())

// 8080ํฌํŠธ๋กœ listen์„ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
app.listen(8080)

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.