報告者

報告外掛會接收 Parcel 在建置過程中發生的事件。例如，報告可能會將狀態資訊寫入 stdout、執行開發伺服器，或是在建置結束時產生一個套件分析報告。

範例

此範例會在建置成功時將套件數目和建置時間寫入 stdout。

import {Reporter} from '@parcel/plugin';

export default new Reporter({
  report({event}) {
    if (event.type === 'buildSuccess') {
      let bundles = event.bundleGraph.getBundles();
      process.stdout.write(`✨ Built ${bundles.length} bundles in ${event.buildTime}ms!\n`);
    }
  }
});

建置開始

當建置開始時，會發出 buildStart 事件。在監控模式中，它會在每次重新建置的開始時發出。

import {Reporter} from '@parcel/plugin';

export default new Reporter({
  report({event}) {
    if (event.type === 'buildStart') {
      process.stdout.write('Started build!\n');
    }
  }
});

建置進度

在整個建置過程中，會發出 buildProgress 事件。它包含一個 phase 屬性，用於指出正在進行的建置階段，而且事件會包含特定於該階段的其他資訊。例如，transforming 階段中的事件會包含正在轉換的資產的 filePath 屬性。請參閱 BuildProgressEvent。

import {Reporter} from '@parcel/plugin';

export default new Reporter({
  report({event}) {
    if (event.type === 'buildProgress') {
      switch (event.phase) {
        case 'transforming':
          process.stdout.write(`Transforming ${event.filePath}...\n`);
          break;
        case 'resolving':
          process.stdout.write(`Resolving ${event.dependency.specifier}...\n`);
          break;
        case 'bundling':
          process.stdout.write('Bundling...\n');
          break;
        case 'packaging':
          process.stdout.write(`Packaging ${event.bundle.displayName}...\n`);
          break;
        case 'optimizing':
          process.stdout.write(`Optimizing ${event.bundle.displayName}...\n`);
         break;
      }
    }
  }
});

建置成功

當建置完成時，會發出 buildSuccess 事件。它包含已建置的完整 bundleGraph、buildTime，以及 changedAssets 清單。

import {Reporter} from '@parcel/plugin';

export default new Reporter({
  report({event}) {
    if (event.type === 'buildSuccess') {
      process.stdout.write(`✨ Rebuilt ${event.changedAssets.size} assets in ${event.buildTime}ms!\n`);
    }
  }
});

建置失敗

當建置完成且有錯誤時，會發出 buildFailure 事件。它包含一個 Diagnostic 物件清單，說明錯誤。請參閱 診斷 以取得詳細資訊。

import {Reporter} from '@parcel/plugin';

export default new Reporter({
  report({event}) {
    if (event.type === 'buildFailure') {
      process.stdout.write(`🚨 Build failed with ${event.diagnostics.length} errors.\n`);
    }
  }
});

記錄

Parcel 中的所有記錄都透過 Reporter 外掛程式路由。level 屬性表示每個 log 事件的類型。info、warn、error 和 verbose 記錄層級包含一個 Diagnostic 物件，提供有關記錄內容的詳細資訊。其他記錄層級只包含 message 屬性。

import {Reporter} from '@parcel/plugin';

export default new Reporter({
  report({event}) {
    if (event.type === 'log') {
      switch (event.level) {
        case 'info':
        case 'verbose':
          process.stdout.write(`ℹ️ ${event.diagnostic.message}\n`);
          break;
        case 'warn':
          process.stdout.write(`⚠️ ${event.diagnostic.message}\n`);
          break;
        case 'error':
          process.stdout.write(`🚨 ${event.diagnostic.message}\n`);
          break;
      }
    }
  }
});

監控器事件

當監控模式開始和結束時，會發出 watchStart 和 watchEnd 事件。與 buildStart 和 buildSuccess/buildFailure 不同，監控器事件只會觸發一次，而不是針對每個建置觸發。

import {Reporter} from '@parcel/plugin';

export default new Reporter({
  report({event}) {
    if (event.type === 'watchStart') {
      process.stdout.write(`Watching started\n`);
    } else if (event.type === 'watchEnd') {
      process.stdout.write(`Watching ended\n`);
    }
  }
});

相關 API

type ProgressLogEvent = {|

  +type: 'log',

  +level: 'progress',

  +phase?: string,

  +message: string,

|}

type DiagnosticLogEvent = {|

  +type: 'log',

  +level: 'error' | 'warn' | 'info' | 'verbose',

  +diagnostics: Array<Diagnostic>,

|}

type TextLogEvent = {|

  +type: 'log',

  +level: 'success',

  +message: string,

|}

type LogEvent = ProgressLogEvent | DiagnosticLogEvent | TextLogEvent;

type BuildStartEvent = {|

  +type: 'buildStart',

|}

type WatchStartEvent = {|

  +type: 'watchStart',

|}

type WatchEndEvent = {|

  +type: 'watchEnd',

|}

type ResolvingProgressEvent = {|

  +type: 'buildProgress',

  +phase: 'resolving',

  +dependency: Dependency,

|}

type TransformingProgressEvent = {|

  +type: 'buildProgress',

  +phase: 'transforming',

  +filePath: FilePath,

|}

type BundlingProgressEvent = {|

  +type: 'buildProgress',

  +phase: 'bundling',

|}

type PackagingProgressEvent = {|

  +type: 'buildProgress',

  +phase: 'packaging',

  +bundle: NamedBundle,

|}

type OptimizingProgressEvent = {|

  +type: 'buildProgress',

  +phase: 'optimizing',

  +bundle: NamedBundle,

|}

type BuildProgressEvent = ResolvingProgressEvent | TransformingProgressEvent | BundlingProgressEvent | BundledProgressEvent | PackagingProgressEvent | OptimizingProgressEvent;

type BuildSuccessEvent = {|

  +type: 'buildSuccess',

  +bundleGraph: BundleGraph<PackagedBundle>,

  +buildTime: number,

  +changedAssets: Map<string, Asset>,

  +requestBundle: (bundle: NamedBundle) => Promise<BuildSuccessEvent>,

|}

type BuildFailureEvent = {|

  +type: 'buildFailure',

  +diagnostics: Array<Diagnostic>,

|}

type BuildEvent = BuildFailureEvent | BuildSuccessEvent;

type ValidationEvent = {|

  +type: 'validation',

  +filePath: FilePath,

|}

type ReporterEvent = LogEvent | BuildStartEvent | BuildProgressEvent | BuildSuccessEvent | BuildFailureEvent | WatchStartEvent | WatchEndEvent | ValidationEvent;

type Reporter = {|

  report({|
    event: ReporterEvent,
    options: PluginOptions,
    logger: PluginLogger,
  |}): Async<void>,

|}