捆绑器

一种插件类型：将资产图转换为包图

捆绑器 API 处于实验阶段，因此可能会发生变化，即使在次要更新之间也是如此。

捆绑器接受整个资产图并对其进行修改以添加包节点，这些节点将资产分组到输出包中。

import { Bundler } from "@parcel/plugin";

export default new Bundler({
  async bundle({ graph }) {
    // ...
  },

  async optimize({ graph }) {
    // ...
  },
});

相关 API

#

TraversalActions parcel/packages/core/types/index.js:1115

用于控制遍历

type TraversalActions = {|
  skipChildren(): void,

跳过当前节点的子节点并继续遍历，如果队列中有其他节点。

  stop(): void,

停止遍历

|}
被引用
GraphTraversalCallback

GraphVisitor parcel/packages/core/types/index.js:1126

本质上是 GraphTraversalCallback，但允许添加特定的节点进入和退出回调。

类型
type GraphVisitor<TNode, TContext> = GraphTraversalCallback<TNode, TContext> | {|
  enter?: GraphTraversalCallback<TNode, TContext>,
  exit?: GraphTraversalCallback<TNode, TContext>,
|};
被引用
包，包图

GraphTraversalCallback parcel/packages/core/types/index.js:1139

用于图遍历的通用回调

参数描述
  • context: 父节点的返回值作为参数传递给子节点的回调。这可以用于在 DFS 中将信息从父节点转发到子节点（与全局变量不同）。

类型
type GraphTraversalCallback<TNode, TContext> = (node: TNode, context: ?TContext, actions: TraversalActions) => ?TContext;
被引用
GraphVisitor

BundleTraversable parcel/packages/core/types/index.js:1148

类型
type BundleTraversable = {|
  +type: 'asset',
  value: Asset,
|} | {|
  +type: 'dependency',
  value: Dependency,
|};
被引用
包

BundleGraphTraversable parcel/packages/core/types/index.js:1155

类型
type BundleGraphTraversable = {|
  +type: 'asset',
  value: Asset,
|} | {|
  +type: 'dependency',
  value: Dependency,
|};
被引用
包图

CreateBundleOpts parcel/packages/core/types/index.js:1171

用于 MutableBundleGraph 的 createBundle 的选项。
如果提供了 entryAsset，则 uniqueKey（用于包 ID）、type 和 env 将从 entryAsset 推断。
如果没有提供 entryAsset，则必须提供 uniqueKey（用于包 ID）、type 和 env。
isSplittable 默认值为 entryAsset.isSplittable 或 false

类型
type CreateBundleOpts =
{|
  +entryAsset: Asset,
  +target: Target,
  +needsStableName?: ?boolean,
  +bundleBehavior?: ?BundleBehavior,
|}
| {|
  +type: string,
  +env: Environment,
  +uniqueKey: string,
  +target: Target,
  +needsStableName?: ?boolean,
  +bundleBehavior?: ?BundleBehavior,
  +isSplittable?: ?boolean,
  +pipeline?: ?string,
|};
被引用
MutableBundleGraph

包 parcel/packages/core/types/index.js:1255

一个 包（资产集合）

interface Bundle {
  +id: string,

包 ID。

  +type: string,

包的类型。

  +env: Environment,

包的环境。

  +target: Target,

包的目标。

  +needsStableName: ?boolean,

包加载时运行的资产（例如，可以添加运行时）。验证

  +bundleBehavior: ?BundleBehavior,

控制包的行为。以确定包何时加载。

  • inline: 内联包不会写入单独的文件，而是嵌入到父包中。
  • isolated: 包将与其父级隔离。共享资产将被复制。
  +isSplittable: ?boolean,

包是否可以拆分。如果为 false，则包的所有依赖项将保留在包内部，而不是引用其他包。这可能会导致资产在多个包之间重复，但对于服务器端渲染等情况很有用。

  +hashReference: string,

包的内容哈希的占位符，可用于包的名称或另一个包的内容。哈希引用在打包和优化后将被包的内容哈希替换。

  getEntryAssets(): Array<Asset>,

返回包加载时立即执行的资产。某些包可能没有任何入口资产，例如共享包。

  getMainEntry(): ?Asset,

返回包的主入口，它将提供包的导出。某些包没有主入口，例如共享包。

  hasAsset(Asset): boolean,

返回包是否包含给定资产。

  hasDependency(Dependency): boolean,

返回包是否包含给定的依赖项。

  traverseAssets<TContext>(visit: GraphVisitor<Asset, TContext>, startAsset?: Asset): ?TContext,

遍历包中的资产。

  traverse<TContext>(visit: GraphVisitor<BundleTraversable, TContext>): ?TContext,

遍历包中的资产和依赖项。

}
被引用
包图，MutableBundleGraph，命名包，命名器，优化进度事件，打包器，打包进度事件，运行时

命名包 parcel/packages/core/types/index.js:1318

一个 包，它被 命名器 命名

interface NamedBundle extends Bundle {
  +publicId: string,

包 ID 的简短版本，用于在运行时引用包。

  +name: string,

包的名称。这是一个相对于包目标目录的文件路径。包名称可能包含哈希引用，但不包含最终的内容哈希。

  +displayName: string,

包名称的版本，其中已删除哈希引用以供显示。

}
被引用
构建成功事件，捆绑进度事件，优化器，优化进度事件，打包包，打包器，打包进度事件，运行时

包组 parcel/packages/core/types/index.js:1341

一组兄弟包（存储在 包图 中），它们应该一起加载（按顺序）。

interface BundleGroup {
  +target: Target,

包组的目标。

  +entryAssetId: string,

包组中入口资产的 ID，它在包组加载时立即执行。

}
被引用
包图，MutableBundleGraph

MutableBundleGraph parcel/packages/core/types/index.js:1353

一个 包图，它可以在 捆绑器 中修改

标记为实验性
interface MutableBundleGraph extends BundleGraph<Bundle> {
  addAssetGraphToBundle(Asset, Bundle, shouldSkipDependency?: (Dependency) => boolean): void,

将资产及其所有子节点添加到包中。

  addAssetToBundle(Asset, Bundle): void,
  addEntryToBundle(Asset, Bundle, shouldSkipDependency?: (Dependency) => boolean): void,

将资产作为入口添加到包中。入口资产在包加载时立即执行。

  addBundleToBundleGroup(Bundle, BundleGroup): void,

将 包 添加到 包组 中，与组中的其他包一起加载它

  createAssetReference(Dependency, Asset, Bundle): void,
  createBundleReference(Bundle, Bundle): void,
  createBundle(CreateBundleOpts): Bundle,
  createBundleGroup(Dependency, Target): BundleGroup,

将边 (依赖项 -> 资产-s) 转换为 (依赖项 -> 包组 -> 资产-s)

  getDependencyAssets(Dependency): Array<Asset>,
  getParentBundlesOfBundleGroup(BundleGroup): Array<Bundle>,

获取异步加载此包的包。

  getTotalSize(Asset): number,
  removeAssetGraphFromBundle(Asset, Bundle): void,

递归地从包中删除资产及其依赖项。在包组边界处停止。

  removeBundleGroup(bundleGroup: BundleGroup): void,

从图中删除 包组。如果组中的任何 包 不再存在于图中，则也会删除这些包。

  internalizeAsyncDependency(bundle: Bundle, dependency: Dependency): void,

将对不同包的依赖项转换为对 bundle 中资产的依赖项。

}
被引用
捆绑器，CreateBundleOpts

包图 parcel/packages/core/types/index.js:1401

一个包含 包、资产、依赖项、包组 的图

interface BundleGraph<TBundle: Bundle> {
  getAssetById(id: string): Asset,

通过 ID 检索资产。

  getAssetPublicId(asset: Asset): string,

返回资产的公共（短）ID。

  getBundles(opts?: {|
    includeInline: boolean
  |}): Array<TBundle>,

返回包图中的包列表。默认情况下，内联包被排除在外。

  traverse<TContext>(visit: GraphVisitor<BundleGraphTraversable, TContext>, startAsset: ?Asset): ?TContext,

以深度优先顺序遍历包图中的资产和依赖项。

  traverseBundles<TContext>(visit: GraphVisitor<TBundle, TContext>, startBundle: ?Bundle): ?TContext,

以深度优先顺序遍历包图中的所有包，包括内联包。

  getBundleGroupsContainingBundle(bundle: Bundle): Array<BundleGroup>,

返回加载给定包的包组列表。

  getBundlesInBundleGroup(bundleGroup: BundleGroup, opts?: {|
    includeInline: boolean
  |}): Array<TBundle>,

返回在给定包组中一起加载的包列表。

  getChildBundles(bundle: Bundle): Array<TBundle>,

返回此包异步加载的包列表。

  getParentBundles(bundle: Bundle): Array<TBundle>,

返回异步加载此包的包列表。

  hasParentBundleOfType(bundle: Bundle, type: string): boolean,

返回包是否由给定类型的另一个包加载。

  getReferencedBundles(bundle: Bundle, opts?: {|
    recursive?: boolean,
    includeInline?: boolean,
  |}): Array<TBundle>,

返回此包引用的包列表。默认情况下，内联包被排除在外。

  getDependencies(asset: Asset): Array<Dependency>,

获取资产所需的依赖项

  getIncomingDependencies(asset: Asset): Array<Dependency>,

获取需要资产的依赖项

  getAssetWithDependency(dep: Dependency): ?Asset,

获取创建依赖项的资产。

  isEntryBundleGroup(bundleGroup: BundleGroup): boolean,

返回给定包组是否是入口。

  resolveAsyncDependency(dependency: Dependency, bundle: ?Bundle): ?({|
    type: 'bundle_group',
    value: BundleGroup,
  |} | {|
    type: 'asset',
    value: Asset,
  |}),

如果指定的依赖项被排除或不是异步的，则返回 undefined，否则返回依赖项解析到的 包组 或 资产。

  isDependencySkipped(dependency: Dependency): boolean,

返回依赖项是否被排除，因为它没有使用过的符号。

  getResolvedAsset(dependency: Dependency, bundle: ?Bundle): ?Asset,

返回依赖项解析到的资产。如果给定包，则优先考虑该包中的资产。如果依赖项被排除，则返回 null。

  getReferencedBundle(dependency: Dependency, bundle: Bundle): ?TBundle,

返回给定包中的依赖项引用的包（如果有）。

  getBundlesWithAsset(Asset): Array<TBundle>,

返回包含给定资产的包列表。

  getBundlesWithDependency(Dependency): Array<TBundle>,

返回包含给定依赖项的包列表。

  isAssetReachableFromBundle(asset: Asset, bundle: Bundle): boolean,

返回给定包的兄弟节点或所有可能的祖先中是否可以访问给定资产。这表明资产可能被排除在给定包之外。

  isAssetReferenced(bundle: Bundle, asset: Asset): boolean,

返回资产是否在给定包之外被引用。

  getSymbolResolution(asset: Asset, symbol: Symbol, boundary: ?Bundle): SymbolResolution,

将 asset 的导出 symbol 解析为源，在离开 bundle 后停止第一个资产。symbol === null: 退出（== 调用者应该执行 asset.exports[exportsSymbol]）symbol === undefined: 未找到符号 symbol === false: 跳过
asset 导出 symbol，尝试找到相应的变量所在的资产（解析重新导出）。一旦离开 boundary（bundle.hasAsset(asset) === false），就停止递归解析，然后 result.symbol 为 undefined。

  getExportedSymbols(asset: Asset, boundary: ?Bundle): Array<ExportSymbolResolution>,

返回资产导出的符号列表，包括重新导出。

  getUsedSymbols(Asset | Dependency): ?$ReadOnlySet<Symbol>,

返回依赖资产引用的资产或依赖项中的符号列表。
如果符号传播未运行（因此结果未知），则返回 null。

  getEntryRoot(target: Target): FilePath,

返回目标的入口资产的公共根目录。

}
被引用
BuildSuccessEvent，BundleGroup，BundledProgressEvent，Bundler，BundlingProgressEvent，MutableBundleGraph，Namer，Optimizer，Packager，Runtime

BundleResult parcel/packages/core/types/index.js:1511

type BundleResult = {|
  +contents: Blob,
  +ast?: AST,
  +map?: ?SourceMap,
  +type?: string,
|}
被引用
Optimizer，Packager

Bundler parcel/packages/core/types/index.js:1574

将资产图转换为 BundleGraph。
bundle 和 optimize 顺序运行，功能上相同。

type Bundler<ConfigType> = {|
  loadConfig?: ({|
    config: Config,
    options: PluginOptions,
    logger: PluginLogger,
  |}) => Promise<ConfigType> | ConfigType,
  bundle({|
    bundleGraph: MutableBundleGraph,
    config: ConfigType,
    options: PluginOptions,
    logger: PluginLogger,
  |}): Async<void>,
  optimize({|
    bundleGraph: MutableBundleGraph,
    config: ConfigType,
    options: PluginOptions,
    logger: PluginLogger,
  |}): Async<void>,
|}
被引用
MutableBundleGraph