バンドラー

プラグインタイプ: アセットグラフをバンドルグラフに変換します。

バンドラー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>,
|};
参照先
Bundle、BundleGraph

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,
|};
参照先
Bundle

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

タイプ
type BundleGraphTraversable = {|
  +type: 'asset',
  value: Asset,
|} | {|
  +type: 'dependency',
  value: Dependency,
|};
参照先
BundleGraph

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

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

Bundle（アセットのコレクション）

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,

バンドルのアセットと依存関係をトラバースします。

}
参照先
BundleGraph、MutableBundleGraph、NamedBundle、Namer、OptimizingProgressEvent、Packager、PackagingProgressEvent

NamedBundle parcel/packages/core/types/index.js:1318

Namerによって命名されたBundle

interface NamedBundle extends Bundle {
  +publicId: string,

実行時にバンドルを参照するために使用される、バンドルIDの短縮版。

  +name: string,

バンドルの名前。これはバンドルのターゲットディレクトリに対する相対ファイルパスです。バンドル名にはハッシュ参照が含まれる場合がありますが、最終的なコンテンツハッシュは含まれません。

  +displayName: string,

表示用にハッシュ参照が削除されたバンドル名のバージョン。

}
参照先
BuildSuccessEvent、BundledProgressEvent、Optimizer、OptimizingProgressEvent、PackagedBundle、Packager、PackagingProgressEvent、Runtime

BundleGroup parcel/packages/core/types/index.js:1341

（BundleGraphに格納されている）一緒に（順番に）ロードされるべき兄弟バンドルのコレクション。

interface BundleGroup {
  +target: Target,

バンドルグループのターゲット。

  +entryAssetId: string,

バンドルグループ内のエントリアセットのID。これは、バンドルグループがロードされた直後に実行されます。

}
参照先
BundleGraph、MutableBundleGraph

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

変更可能なBundler内のBundleGraph

実験的としてマーク
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,

BundleをBundleGroupに追加し、グループ内の他のバンドルと一緒にロードします。

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

エッジ（Dependency -> Asset-s）を（Dependency -> BundleGroup -> Asset-s）に変換します。

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

このバンドルを非同期的にロードするバンドルを取得します。

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

バンドルからアセットとその依存関係を再帰的に削除します。バンドルグループの境界で停止します。

  removeBundleGroup(bundleGroup: BundleGroup): void,

グラフからBundleGroupを削除します。グループのBundleのいずれかがグラフに存在しなくなった場合、それらも削除されます。

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

異なるバンドルへの依存関係を、bundle内のアセットへの依存関係に変換します。

}
参照先
Bundler、CreateBundleOpts

BundleGraph parcel/packages/core/types/index.js:1401

Bundle-s、Asset-s、Dependency-s、BundleGroup-sを含むグラフ

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,
  |}),

指定された依存関係が除外されたか、非同期でなかった場合、またはそれ以外の場合、依存関係が解決されるBundleGroupまたはAssetを返します。

  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 に変換します。
バンドルと最適化は直列に実行され、機能的には同一です。

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