报告器

报告器插件在构建过程中接收 Parcel 的事件。例如，报告器可以将状态信息写入标准输出、运行开发服务器，或在构建结束时生成打包分析报告。

示例

此示例在构建成功时将打包数量和构建时间写入标准输出。

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 中的所有日志都通过报告器插件路由。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>,

|}