[Parcel] hashなしファイルを生成する
はじめに
Parcelのビルド設定は標準のままだと index.53f7bde3.js
のように、すべてのファイルがハッシュ尽きのファイル名になります。
本来はこれで問題ないのですが、データ納品し、その後の運用をお願いするケースで、ハッシュ付きだと困ることが往々にしてあったので、 全てのアセットが index.js
のようにプレーンなファイル名が出力されるように設定しました。
Percel
ParcelはWebpackのように複雑な設定ファイルを用意することなく、様々な言語で書かれたコードをよしなに変換し、バンドルしてくれるのが魅力です。ただ、v1まではかゆいところに手が届かないという欠点がありました。
Namer Plugin
v2.0からはゼロコンフィグの魅力はそのままに、 .parcelrc
という設定ファイルを追加し、 プラグイン によってある程度細かい設定をして自由に拡張できるようになっています。
プラグインシステムの中でも、出力するファイル名に関わるのが Namer です。今回は、parcel-namer-custom というプラグインが使い勝手がよさそうだったので使ってみたいと思います。
ちなみに、ビルドコマンドのオプションに --no-content-hash
というのがありますが、 コマンドで指定したエントリーポイントにしか適応されません。
手順
- インストールします
$ npm install --save-dev parcel-namer-custom
-
.parcelrc
に追加
{
"extends": "@parcel/config-default", // デフォルトの設定を引き継ぐ
"namers": ["parcel-namer-custom", "..."], // namerの指定
}
-
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になってまだ間もないのでベストプラクティスはまだまだ模索していく必要がありそうです。
Discussion