diff --git a/README.md b/README.md index 6178c9a..b0e092b 100644 --- a/README.md +++ b/README.md @@ -45,11 +45,13 @@ If you [import CSS](https://esbuild.github.io/content-types/#css-from-js) in you Suppose you have an image `app/javascript/images/example.png` that you need to reference in frontend code built with esbuild. 1. Create the image at `app/javascript/images/example.png`. -1. In `package.json`, under `"scripts"` and `"build"`, add the option `--loader:.png=file` to the esbuild script, which instructs esbuild to copy png files to the build directory. -1. When esbuild runs, it will copy the png file to something like `app/assets/builds/example-5SRKKTLZ.png`. +1. In `package.json`, under `"scripts"` and `"build"`, add the additional arguments: + * `--loader:.png=file` This instructs esbuild to copy png files to the build directory. + * `--asset-names=[name]-[hash].digested` This tells esbuild to append `.digested` to the file name so that sprockets or propshaft will not append an additional digest hash to the file. +1. When esbuild runs, it will copy the png file to something like `app/assets/builds/example-5SRKKTLZ.digested.png`. 1. In frontend code, the image is available for import by its original name: `import Example from "../images/example.png"`. 1. The image itself can now be referenced by its imported name, e.g. in React, ``. -1. The path of the image resolves to `/assets/example-5SRKKTLZ.png`, which is served by the asset pipeline. +1. The path of the image resolves to `/assets/example-5SRKKTLZ.digested.png`, which is served by the asset pipeline. ## License diff --git a/lib/install/esbuild/install.rb b/lib/install/esbuild/install.rb index b6b8157..ab91aa7 100644 --- a/lib/install/esbuild/install.rb +++ b/lib/install/esbuild/install.rb @@ -2,7 +2,7 @@ run "yarn add esbuild" say "Add build script" -build_script = "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets" +build_script = "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets" case `npx -v`.to_f when 7.1...8.0