how to handle output files in parcel - parceljs

Question

I have a project with this structure:
src
|- index.pug
| - layout
| |- index.less
| - scripts
| |- index.js
For now, when I run parcel build src/index.pug, all the files are bundled and I've got this on the distribution folder:
dist
|- index.html
|- index.12345.css
|- index.12345.js
When I was expected something like:
ist
|- index.html
|- layout
| |- index.12345.css
|- scripts
| |- index.12345.js
So, my question is: Can I specify the output path for my CSS, js, and images using ParcelJS?

Answer 1

Unfortunately, this isn't supported out-of-the box by parcel. Parcel v1 you can use this plugin. For parcel v2, it is possible to write a namer plugin that accomplishes this.
Here's the code (in typescript):
import { Namer } from "#parcel/plugin";
import type { Bundle } from "#parcel/types";
import path from "path";
export default new Namer({
name({ bundle }) {
switch (bundle.type) {
case "js":
return getPathWithFolder("scripts", bundle);
case "less":
return getPathWithFolder("layout", bundle);
case "css":
return getPathWithFolder("layout", bundle);
default:
return null;
}
},
});
function getPathWithFolder(folderName: string, bundle: Bundle): string | null {
const filePath = bundle.getMainEntry()?.filePath;
if (!filePath) return null;
let nameWithoutExtension = path.basename(filePath, path.extname(filePath));
if (!bundle.needsStableName) {
// See: https://parceljs.org/plugin-system/namer/#content-hashing
nameWithoutExtension += "." + bundle.hashReference;
}
return `${folderName}/${nameWithoutExtension}.${bundle.type}`;
}
Then, supposing the above code was published in a package called parcel-namer-folders, you would add it to your parcel pipeline with this .parcelrc:
{
"extends": "#parcel/config-default",
"namers": ["parcel-namer-folders", "..."]
}
Here is an example repo where this is working.