How to change name of js file outputs?

[thedewpoint]

Is there a way to configure filename outputs? I only see options for entry point

[davidnagli]

You can use the --out-file flag (short version is -o)

For example:

parcel entry.html -o bundle.html

[davidnagli]

Does anybody know why the --out-file flag doesn’t come up when the help command is ran?

cc\ @devongovett

[brandon93s]

@thedewpoint

Is there a way to configure filename outputs? I only see options for entry point

Currently, you can only rename the entry point as you've mentioned using -o.

@davidnagli - shows up for me parcel serve --help, parcel build --help, etc:

[davidnagli]

@brandon93s Whoops had an older version of Parcel running on this machine (I guess Parcel didn’t have the option in v1.5.1). Works perfectly after updating.

@thedewpoint Ya you can only change the entry point output filename, it probably won’t be feasible for a zero-config bundler to give users complete control over all the output filenames from the CLI.

You should, however, be able to get complete programmatic control over file names pretty easily if you create your own Packager.

Btw depending on the reason why you’re asking about controlling the filenames, this RFC might be relevant to you: #872

[bennadel]

On a somewhat related note, the --out-file doesn't seem to honor the extension I use:

parcel watch ./client/src/index.htm --out-dir ./client/dist --out-file index.htm

... produces a file called index.html even though my out-file (and my entry-point) uses .htm file extensions.

[DeMoorJasper]

out-file is just the filename not containing the extension.
Is there any particular use for using htm over html as extension?

Not sure if there should be a way to rename all files instead of just the entrypoint?

If not than I guess we can close this issue

[bennadel]

@DeMoorJasper just habit. Been using .htm for years. Good to know that the out-file option is only for the filename base. Thanks!

[simkessy]

This doesn't work when using Parcel 2?

[muhammedMoussa]

This doesn't work when using Parcel 2?

+1 got error: unknown option -o' `

[leodr]

This doesn't work when using Parcel 2?

This doesn't work when using Parcel 2?

+1 got error: unknown option -o' `

Parcel 2 uses the main field in package.json as your output file.

[william-deckard]

You can use the --out-file flag (short version is -o)

For example:

parcel entry.html -o bundle.html

That outputs the .html not the JS file as the OP has requested.

[rupamkairi]

Is there any way to build js file as output file. I am using it in a situation where I need to inject the js file.

[TomzBench]

I have same situation as @rupamkairi

I am using webview and I would rather not fish around for some hash string and just inject the js file simply

[justingolden21]

I'm in the same situation as runpamkairi and TomzBench.

Is this not being looked into any more?

I can't use parcel for any PWAs if every time I create a project I have to generate the project, find the hash, and then add that to my service worker and pray it doesn't change during development.

[VincentVToscano]

@justingolden21 @TomzBench @rupamkairi I am also wondering how to do this. It needs to be a predictable name for the templating language I am using. Have any of you had success with a workaround or have identified a way to get this value in Parcel 2 2.0.0-rc.0?

[justingolden21]

For what it's worth, I'm using svelte for my PWA, and since I'm localizing it into multiple languages, I'm dynamically sending a json from the get request for a manifest.webmanifest that has all the same icon links and just different names and descriptions.

Being able to dynamically edit the "json" in this "non json" file would be nice. The CLI could take in the line number of the starting json as an argument / flag.

[VincentVToscano]

svelte

Thanks for the reply. I've not used that myself to build PWAs but it looks promising for future projects.

Being able to dynamically edit the "json" in this "non json" file would be nice. The CLI could take in the line number of the starting json as an argument / flag.
I was thinking something similar to that whereby it's stored in an ENV var, that by read by other processes to achieve the goal.

[justingolden21]

@VincentVToscano Svelte is awesome, it's kind of like Vue but lighter weight and simpler. It has an awesome community as well. I'd definitely look into it.

The environment variable idea is neat.

[VincentVToscano]

@VincentVToscano Svelte is awesome, it's kind of like Vue but lighter weight and simpler. It has an awesome community as well. I'd definitely look into it.

The environment variable idea is neat.

I actually sent some info to my team this morning... nice to get some new tech surfaced to everyone so they can see what's out there as well. Looking forward to playing with it myself. Going to add ya to my GH buds here too! Have a great start to your week.

[steve-taylor]

This doesn't work when using Parcel 2?

This doesn't work when using Parcel 2?

+1 got error: unknown option -o' `

Parcel 2 uses the main field in package.json as your output file.

Bad luck if, like me, you have multiple things to build (e.g. browser-based test suite).

[Southclaws]

How does this work with multiple files?

I have a couple of .js and a .html and a .css file for a browser extension, I need predictable file names for the rest of the build pipeline in production.

Currently coming out with hashes (yes, tried --no-content-hash but I'd rather have a normal name not a hash of any kind)

[Sfinx]

parcel2: main in package.json do not work for me (nodejs app). -o option is must have in bundler

[F30]

You can achieve this using a Namer plugin such as parcel-namer-rewrite or a minimal custom local plugin like this:

const path = require("path")
const plugin = require("@parcel/plugin")

const namer = new plugin.Namer({
  name({bundle}) {
    const origName = path.basename(bundle.getMainEntry().filePath)

    if (["files", "to", "rename"].includes(origName)) {
      return "newName"
    }

    // Continue to next Namer
    return null
  }
})

module.exports = namer

[VincentVToscano]

@F30 Thanks for passing this along. I am sure this will be helpful to all those seeking custom file names. 👍