Namer

Namerプラグインは、バンドルの出力ファイル名を決定します。Namerは、いずれかが結果を返すまでパイプラインで実行されます。返されるファイルパスは、ターゲットのdistDirに対する相対パスである必要があります。詳細については、ターゲットを参照してください。

特定のバンドルの名前を上書きする

Namerプラグインの一般的なユースケースは、特定のバンドルに対してParcelのデフォルトの命名スキームを上書きすることです。Namerは、バンドルを処理しない場合はnullを返すことができ、パイプライン内の次のnamerが代わりに処理できるようにします。この仕組みの詳細については、Parcelの設定ドキュメントのNamerを参照してください。

この例では、すべてのpngおよびjpgファイルを、元のファイル名と同じ名前のimagesフォルダーに配置します。

import {Namer} from '@parcel/plugin';
import path from 'path';

export default new Namer({
  name({bundle}) {
    if (bundle.type === 'png' || bundle.type === 'jpg') {
      let filePath = bundle.getMainEntry().filePath;
      return `images/${path.basename(filePath)}`;
    }

    // Allow the next namer to handle this bundle.
    return null;
  }
});

コンテンツハッシュ

バンドルの内容のハッシュを含めることは、ブラウザがロードされたファイルを無期限にキャッシュできるようにする、本番ビルドにとって重要な最適化です。バンドルの内容が変更されると、そのファイル名も変更され、これがキャッシュの無効化メカニズムとして機能します。詳細については、コンテンツハッシュのドキュメントを参照してください。

バンドルの命名が行われる時点では、最終的な内容はまだ不明なため、Parcelは各BundleオブジェクトにhashReferenceプロパティを提供します。これは、最終的なバンドルの書き込み時に実際のハッシュに後で置き換えられる不透明なプレースホルダー値です。コンテンツハッシュを含めるには、返されたバンドル名でこれを使用します。

ハッシュを含める前に、bundle.needsStableNameプロパティを必ず確認してください。これがtrueの場合、依存関係はバンドルのファイル名が時間の経過とともに一貫性を保つことを期待しています。たとえば、サービスワーカーではURLが変更されないことが必要であり、ユーザーはHTMLページのような表示されるURLが人間が読みやすく、一貫性を保つことを期待しています。

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

export default new Namer({
  name({bundle}) {
    let name = yourNamingFunction(bundle);
    if (!bundle.needsStableName) {
      name += "." + bundle.hashReference;
    }
    return name + "." + bundle.type;
  }
});

ターゲット

Namerプラグインは、バンドルに関連付けられているTargetも尊重する必要があります。ターゲットを使用すると、ユーザーはpackage.jsonでエントリバンドルの出力ファイル名を構成できます。バンドルがエントリバンドルグループにあり、エントリアセットが含まれている場合、Namerプラグインは可能な場合はbundle.target.distEntryを出力ファイル名として使用する必要があります。

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

export default new Namer({
  name({bundle, bundleGraph}) {
    let bundleGroup = bundleGraph
      .getBundleGroupsContainingBundle(bundle)[0];
    let isEntry = bundleGraph.isEntryBundleGroup(bundleGroup);
    let bundleGroupBundles = bundleGraph
      .getBundlesInBundleGroup(bundleGroup);
    let mainBundle = bundleGroupBundles.find(b =>
      b.getEntryAssets()
       .some(a => a.id === bundleGroup.entryAssetId),
  );

    if (
      isEntry && 
      bundle.id === mainBundle.id && 
      bundle.target?.distEntry
    ) {
      return bundle.target.distEntry;
    }

    // ...
  }
});

設定の読み込み

ユーザーのプロジェクトから設定を読み込む必要がある場合は、NamerプラグインのloadConfigメソッドで行う必要があります。この方法の詳細については、設定の読み込みを参照してください。

関連API

type Namer<ConfigType> = {|

  loadConfig?: ({|
    config: Config,
    options: PluginOptions,
    logger: PluginLogger,
  |}) => Promise<ConfigType> | ConfigType,

  name({|
    bundle: Bundle,
    bundleGraph: BundleGraph<Bundle>,
    config: ConfigType,
    options: PluginOptions,
    logger: PluginLogger,
  |}): Async<?FilePath>,

|}