Parcel 資源類(lèi)型

資源類(lèi)型

正如 資源文檔 里描述的，Parcel 將輸入的文件看作 資源（Asset）。資源類(lèi)型被看作繼承自基準(zhǔn) Asset類(lèi)的子類(lèi)，并實(shí)現(xiàn)了必須的接口，去解析、分析依賴、轉(zhuǎn)換及生成代碼。

因?yàn)?Parcel 在多處理器內(nèi)核中并行處理資源，因此資源類(lèi)型所能夠?qū)嵤┑霓D(zhuǎn)換行為，會(huì)被限制為那些可以  在單一時(shí)間內(nèi)操作單一文件的轉(zhuǎn)換行為。而那些需要操作多個(gè)文件的轉(zhuǎn)換行為，則需要一個(gè)自定義的Packager。

資源接口

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

class MyAsset extends Asset {
  type = 'foo' // 設(shè)置主要輸出類(lèi)型

  async parse(code) {
    // 將代碼解析為 AST 樹(shù)
    return ast
  }

  async pretransform() {
    // 可選。在收集依賴之前轉(zhuǎn)換。
  }

  collectDependencies() {
    // 分析依賴
    this.addDependency('my-dep')
  }

  async transform() {
    // 可選。在收集依賴之后轉(zhuǎn)換。
  }

  async generate() {
    // 生成代碼。如有需要，可返回多個(gè)轉(zhuǎn)換(renditions)。
    // 結(jié)果會(huì)傳到合適的 packagers 去生成最終的 bundles
    return [
      {
        type: 'foo',
        value: 'my stuff here' // 主輸出
      },
      {
        type: 'js',
        value: 'some javascript', // 如若需要，此轉(zhuǎn)換內(nèi)容可被放到 JS 的 bundle 中
        sourceMap
      }
    ]
  }

  async postProcess(generated) {
    // 所有代碼生成后的過(guò)程
    // 可用于組合多種類(lèi)型資源
  }
}

注冊(cè)資源類(lèi)型

你可以用 addAssetType 方法在打包工具中去注冊(cè)你的資源類(lèi)型。它接受一個(gè)文件擴(kuò)展名，以及資源類(lèi)型模塊的路徑。它是一個(gè)路徑，而非實(shí)際的對(duì)象，這樣可以使它被傳至 worker 進(jìn)程中。

const Bundler = require('parcel-bundler')

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