Update docs & install for referencing images in JS

[tgaff]

This should resolve #76 at least for the default esbuild case.
Sprockets has already added support for ignoring .digested assets.

As a demonstration I have a reproduction case repo here.

• The main branch shows the problem and is hosted in production mode here.
• A fixed version exists on the branch "fix" and is hosted (and can be seen working) here.

Note the above deploys are "free" render.com instances. You may need to wait and retry after the initial request while it spins up.

The diff between the two is merely:

diff --git a/package.json b/package.json
index f740713..7ff9177 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,6 @@
     "esbuild": "^0.17.19"
   },
   "scripts": {
-    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --loader:.png=file"
+    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --loader:.png=file --asset-names=[name]-[hash].digested"
   }
 }

This is mainly a doc change, walking through making this change to the build script.
However, I think there may be a good argument to be made for just including these in the build script by default. Not every user will need it but it probably wouldn't do any harm. (Not sure if we'd want just png, or if we want to include other formats) Please let me know if you'd like me to prepare that change.

[shrmnk]

Adding --asset-names=[name]-[hash].digested causes the build to fail with error

No matches found: "--asset-names=[name]-[hash].digested"

Full scripts.build in package.json:

"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --loader:.png=file --asset-names=[name]-[hash].digested",

Versions

• esbuild: 0.17.19
• Rails: 7.0.5.1
• jsbundling-rails: 1.1.2

--

EDIT: Turns out all I had to do was to wrap the value of --asset-names in quotes:

"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --loader:.png=file --asset-names=\"[name]-[hash].digested\"",

Sorry for the noise!

[tgaff]

@shrmnk I'm curious why you had to do that. I tried a few different scenarios like spaces and couldn't reproduce it. Is there something different about your platform? (I didn't try Windows). Symbols in file names maybe?

[shrmnk]

Hmm yeah that's possible. I'm on macOS, zsh.

[tgaff]

Same platform and shell as me. 🤷