๐Ÿ“ ์• ์…‹ ์œ ํ˜•

์• ์…‹ ๋ฌธ์„œ์— ๊ธฐ์ˆ ํ–ˆ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ, Parcel ์€ ๊ฐ ์ž…๋ ฅ ํŒŒ์ผ์„ Asset์ด๋ผ๊ณ  ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. ์• ์…‹ ์œ ํ˜•(type)์€ ๊ธฐ๋ณธ Asset ํด๋ž˜์Šค๋ฅผ ์ƒ์†ํ•œ ํด๋ž˜์Šค๋กœ ํ‘œํ˜„๋ฉ๋‹ˆ๋‹ค. ์• ์…‹ ์œ ํ˜•์€ ๊ตฌ๋ฌธ ๋ถ„์„(parse), ์ข…์†์„ฑ ๋ถ„์„, ๋ณ€ํ™˜๊ณผ ์ฝ”๋“œ ์ƒ์„ฑ์— ํ•„์š”ํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

Parcel ์€ ๋‹ค์ค‘ ํ”„๋กœ์„ธ์„œ ์ฝ”์–ด๋กœ ์• ์…‹์„ ๋ณ‘๋ ฌ ์ฒ˜๋ฆฌ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์• ์…‹ ์œ ํ˜•์ด ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ๋ณ€ํ™˜์€ ํ•œ๋ฒˆ์— ํ•˜๋‚˜์˜ ํŒŒ์ผ ์šด์šฉ๋งŒ์œผ๋กœ ํ•œ์ • ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ ํŒŒ์ผ ๋ณ€ํ™˜์„ ์œ„ํ•ด ์‚ฌ์šฉ์ž ์ •์˜ ํŒจํ‚ค์ €๋ฅผ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์• ์…‹ ์ธํ„ฐํŽ˜์ด์Šค

const { Asset } = require('parcel-bundler')

class MyAsset extends Asset {
  type = 'foo' // ์ฃผ ์ถœ๋ ฅ ์œ ํ˜• ์„ค์ •

  async parse(code) {
    // AST์— ์ฝ”๋“œ ๊ตฌ๋ฌธ ๋ถ„์„
    return ast
  }

  async pretransform() {
    // ์˜ต์…˜. ์˜์กด์„ฑ ์ˆ˜์ง‘ ์ด์ „์˜ ๋ณ€ํ™˜.
  }

  collectDependencies() {
    // ์˜์กด์„ฑ ๋ถ„์„.
    this.addDependency('my-dep')
  }

  async transform() {
    // ์˜ต์…˜. ์˜์กด์„ฑ ์ˆ˜์ง‘ ์ด์ „์˜ ๋ณ€ํ™˜.
  }

  async generate() {
    // ์ฝ”๋“œ ์ƒ์„ฑ. ํ•„์š”ํ•˜๋‹ค๋ฉด ๋‹ค์ˆ˜์˜ ํ‘œํ˜„(rendition)์„ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ์Œ.
    // ๊ฒฐ๊ณผ๋ฌผ์€ ์ ์ ˆํ•œ ํŒจํ‚ค์ €๋กœ ์ „๋‹ฌ๋˜์–ด ์ตœ์ข… ๋ฒˆ๋“ค์„ ์ƒ์„ฑ.
    return [
      {
        type: 'foo',
        value: 'my stuff here' // ๋ฉ”์ธ ์ถœ๋ ฅ
      },
      {
        type: 'js',
        value: 'some javascript', // ํ•„์š”ํ•˜๋‹ค๋ฉด JS ๋ฒˆ๋“ค์— ๋ฐฐ์น˜ํ•  ๋Œ€์ฒด ํ‘œํ˜„(rendition)
        sourceMap
      }
    ]
  }

  async postProcess(generated) {
    // ๋ชจ๋“  ์ฝ”๋“œ ์ƒ์„ฑ์ด ์™„๋ฃŒ๋œ ๋’ค ์‹คํ–‰๋  ์ž‘์—…
    // ์—ฌ๋Ÿฌ ์• ์…‹ ํƒ€์ž…์„ ํ•ฉ์น˜๋Š” ๋“ฑ์— ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  }
}

์• ์…‹ ์œ ํ˜• ๋“ฑ๋กํ•˜๊ธฐ

addAssetType ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด ์• ์…‹ ์œ ํ˜•์„ ๋ฒˆ๋“ค๋Ÿฌ์— ๋“ฑ๋กํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋“ฑ๋กํ•  ํŒŒ์ผ ํ™•์žฅ์ž์™€ ์• ์…‹ ์œ ํ˜• ๋ชจ๋“ˆ์˜ ๊ฒฝ๋กœ๋ฅผ ๋ฐ›์•„๋“ค์ž…๋‹ˆ๋‹ค. ์‹ค์ œ ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ ๊ฒฝ๋กœ์ด๊ธฐ ๋•Œ๋ฌธ์— ์›Œ์ปค ํ”„๋กœ์„ธ์Šค๋กœ ์ „๋‹ฌ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const Bundler = require('parcel-bundler')

let bundler = new Bundler('input.js')
bundler.addAssetType('.ext', require.resolve('./MyAsset'))

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.