Parcel: Remove hash from JS file using CLI

[deadcoder0904]

🐛 bug report

I want to remove hash of a JS file using CLI, not API

🎛 Configuration (.babelrc, package.json, cli command)

{
  "build": "parcel build --no-content-hash index.html --out-dir dist",
}

🤔 Expected Behavior

I want a plain background.js without hash while still using CLI

😯 Current Behavior

Generates JS file with a hash like background.7as78c.js

💁 Possible Solution

A method like --no-content-hash on CLI just like API has contentHash: false as mentioned here

🔦 Context

I am trying to make a simple Chrome extension using Parcel. It has a background.js script referenced through manifest.json.

So, even if my index.html points to correct background.js file which is hash-based, my manifest.json only points to the background.js which I've mentioned.

💻 Code Sample

background.js

console.log(`Gimme a hell yeah ☠️`)

manifest.chrome.json / manifest.firefox.json

{
  "manifest_version": 2,
  "name": "Chrome extension",
  "version": "1.0.0",
  "background": {
    "scripts": ["background.js"]
  }
}

package.json

Currently, I'm solving removing hash with a hack of renaming using script rename:background. The gripe with that is it doesn't change the reference of index.html but thankfully I'm not using index.html in this project.

{
  "name": "chrome-extension",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "clean": "rimraf dist",
    "build:firefox": "parcel build --no-content-hash index.html --out-dir dist/firefox",
    "build:chrome": "parcel build --no-content-hash index.html --out-dir dist/chrome",
    "copy:firefox": "cpy 'manifest.firefox.json' 'icons' 'dist/firefox'",
    "copy:chrome": "cpy 'manifest.chrome.json' 'icons' 'dist/chrome'",
    "rename:background": "rename -n 'dist/**/background.*.js' 'dist/**/background.js'",
    "rename:firefox": "rename 'dist/firefox/manifest.firefox.json' 'dist/firefox/manifest.json'",
    "rename:chrome": "rename 'dist/chrome/manifest.chrome.json' 'dist/chrome/manifest.json'",
    "prod": "npm-run-all clean build:* copy:* rename:*"
  },
  "license": "MIT",
  "devDependencies": {
    "cpy-cli": "^2.0.0",
    "npm-run-all": "^4.1.5",
    "parcel-bundler": "^1.11.0",
    "rename-cli": "^6.0.0",
    "rimraf": "^2.6.3"
  }
}

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.10.3
| Node | 10.13.0
| Yarn | 1.13.0
| Operating System | 10.14.2

[mischnic]

There is an option --no-content-hash:
https://github.com/parcel-bundler/parcel/blob/95dfb33c9f2d4a3ebc14077f4a8cbbcdef5911b1/packages/core/parcel-bundler/src/cli.js#L140
Does that work?

[deadcoder0904]

@mischnic as you can see I've specified it in my scripts build:firefox it doesn't work sadly :(

[mischnic]

Oh, --no-content-hash makes the hash based only on the path of the given file, not on the content:
https://github.com/parcel-bundler/parcel/blob/95dfb33c9f2d4a3ebc14077f4a8cbbcdef5911b1/packages/core/parcel-bundler/src/Bundle.js#L123-L124

use a hash of the filename so it remains consistent across builds.

[DeMoorJasper]

You could still use --no-content-hash and just use the generated name, in theory it shouldn't change as long as the path doesn't change. Or you could generate the chrome manifest?
I even think there's already a plugin for generating these manifest files if I'm not mistaken

[deadcoder0904]

You could still use --no-content-hash and just use the generated name, in theory it shouldn't change as long as the path doesn't change. Or you could generate the chrome manifest?

Doesn't work.

I even think there's already a plugin for generating these manifest files if I'm not mistaken

Any links?

[DeMoorJasper]

I think this one is for chrome extensions? https://yarnpkg.com/en/package/parcel-plugin-web-extension

[mischnic]

Maybe this one works better in this case: https://github.com/mugi-uno/parcel-plugin-bundle-manifest

[deadcoder0904]

@mischnic so I tried your recommendation but it gives error

Could not load background script 'background.js'.
Could not load manifest.

Because I specified background.js in manifest.json like so, so it can't locate it as it still contains hash.

Complete repo is here 👉https://github.com/deadcoder0904/multiple-new-tab

Trying other recommendation now

[deadcoder0904]

@DeMoorJasper that doesn't work properly at all. It doesn't even copy my background.js contents & outputs a filename that is specified after build, in my case, it outputs manifest.chrome.js & manifest.firefox.js because I did parcel build manfiest.chrome.json & parcel build manfiest.firefox.json.

[deadcoder0904]

Okay so I found the solution & it was indeed my mistake 🤦‍♂️

What I did was specified --no-content-hash in front of index.html but index.html never had hash

So I accidentally removed my index.html & placed background.js in place of there & it worked.

The final script was parcel build --no-content-hash background.js --out-dir dist/chrome.

I didn't even need parcel-plugin-bundle-manifest which works incredibly well.

Thanks, everyone for helping out 🙌