I’m working on a TypeScript project where I’m using Parcel v2.x for bundling, and I want to remove the hash from the output filenames (particularly from index.js and index.runtime.js).
I’ve been using the parcel-namer-hashless plugin, and while it successfully removes the hash from most of my files (like favicon.ico, esp32.js, etc.), I’m still encountering issues with the index.js and index.runtime.js files. They continue to have a hash in their filenames, despite my efforts to configure the plugin to remove them.
Here’s what I’ve tried so far:
Configured parcel-namer-hashless in package.json:
{
"name": "typescript",
"version": "1.0.0",
"description": "This an example of using esptool-js with parcel and typescript",
"source": "src/index.html",
"scripts": {
"genDocs": "cd ../.. && npm run genDocs && mkdir -p examples/typescript/dist && cp -r docs examples/typescript/dist && cd examples/typescript",
"dev": "npm run clean && npm run genDocs && parcel src/index.html",
"build": "npm run clean && npm run genDocs && parcel build src/index.html --no-optimize --public-url ./",
"clean": "rimraf dist .parcel-cache",
"test": "echo "Error: no test specified" && exit 1",
"postbuild": "mv dist/index.runtime.*.js dist/index.runtime.js"
},
"parcelIgnore": [
"./docs/.+"
],
"author": "",
"license": "ISC",
"devDependencies": {
"parcel": "^2.8.3",
"parcel-namer-hashless": "^1.0.6",
"parcel-resolver-ignore": "^2.1.5",
"rimraf": "^4.1.2",
"typescript": "^4.9.4",
"web-serial-polyfill": "^1.0.15"
},
"parcel-namer-hashless": {
"include": [
".js$",
".ico$"
]
}
}
Configured the .parcelrc file:
{
"extends": "@parcel/config-default",
"resolvers": [
"parcel-resolver-ignore",
"..."
],
"namers": [
"parcel-namer-hashless"
]
}
Cleared the Parcel cache and rebuilt multiple times.
Despite these efforts, index.runtime.js still havs hashes appended to them. The build output looks like this:
dist/index.runtime.298534a0.js
All other files are correctly renamed without hashes.
I also tried adding a post-build script to manually rename the files, but I’d prefer to have a cleaner solution within Parcel if possible.
My Questions:
How can I ensure that index.runtime.js are generated without hashes using Parcel and parcel-namer-hashless?
Is there a better way to configure Parcel or the parcel-namer-hashless plugin to handle runtime files?
Is there a specific reason why Parcel insists on adding a hash to runtime files, and how can this behavior be overridden?
Any advice or suggestions would be greatly appreciated. Thanks in advance!
I also tried it with a custom-namer.js with the same output:
const { Namer } = require('@parcel/plugin');
module.exports = new Namer({
async name({ bundle }) {
const entryAsset = bundle.getMainEntry();
// Handle the main HTML or JS entry point (index)
if (entryAsset && entryAsset.filePath.includes('index')) {
// Check if it's a runtime file (Parcel auto-generates runtime bundles)
if (bundle.type === 'js' && !bundle.isInline && bundle.needsStableName && bundle.isSplittable === false) {
// Ensure the runtime script is named without a hash
return `index.runtime.js`;
}
// For regular 'index.js' or 'index.html'
return `index.${bundle.type}`;
}
// For all other entry points, use the original file name without hash
if (entryAsset) {
const originalName = entryAsset.filePath.split('/').pop().split('.')[0]; // Get original name without extension
return `${originalName}.${bundle.type}`;
}
// Fallback for other dynamically generated chunks or assets
const id = bundle.id.slice(0, 8); // Shorten bundle ID to 8 characters for uniqueness
return `bundle-${id}.${bundle.type}`;
}
});