Zenn
📦

[Parcel] hashなしファイルを生成する

2021/08/15に公開
frontend
#
parcel
tech

はじめに

Parcelのビルド設定は標準のままだと index.53f7bde3.js のように、すべてのファイルがハッシュ尽きのファイル名になります。

本来はこれで問題ないのですが、データ納品し、その後の運用をお願いするケースで、ハッシュ付きだと困ることが往々にしてあったので、 全てのアセットが index.js のようにプレーンなファイル名が出力されるように設定しました。

Percel

ParcelはWebpackのように複雑な設定ファイルを用意することなく、様々な言語で書かれたコードをよしなに変換し、バンドルしてくれるのが魅力です。ただ、v1まではかゆいところに手が届かないという欠点がありました。

Namer Plugin

v2.0からはゼロコンフィグの魅力はそのままに、 .parcelrc という設定ファイルを追加し、 プラグイン によってある程度細かい設定をして自由に拡張できるようになっています。

プラグインシステムの中でも、出力するファイル名に関わるのが Namer です。今回は、parcel-namer-custom というプラグインが使い勝手がよさそうだったので使ってみたいと思います。

ちなみに、ビルドコマンドのオプションに --no-content-hash というのがありますが、 コマンドで指定したエントリーポイントにしか適応されません。

手順

  1. インストールします
$ npm install --save-dev parcel-namer-custom
  1. .parcelrc に追加
{
  "extends": "@parcel/config-default", // デフォルトの設定を引き継ぐ
  "namers": ["parcel-namer-custom", "..."], // namerの指定
}
  1. package.json で出力したいファイル形式を指定します
...
"parcel-namer-custom": {
    "src/index.pug$": "[name].[type]",
    ".(pug|html)$": "[dir]/[name].[type]",
    ".(js|ts)$": "[dir]/[name].[type]",
    ".scss$": "[dir]/[name].[type]",
    ".(jpg|gif|png|webp|svg)$": "[dir]/[name].[type]",
    ".jsx?$": "scripts/[name].[hash].[type]"
},
...

このような感じでかなり直感的に指定できます！今回は元ファイルの階層を保持したかったので、 dir で指定しました。（構成は適宜変えてください）

余談

--public-url の設定を引き継ぎたく、プラグイン内のコードをいじっていたのですが、Namerプラグイン内の ServerOptions にそもそも値が入ってきていなかったので、応急処置で設定ファイル内で直書きをしました。v2になってまだ間もないのでベストプラクティスはまだまだ模索していく必要がありそうです。

Reference

Discussion