README.md in jsbundling-rails-1.1.1 vs README.md in jsbundling-rails-1.1.2
- old
+ new
@@ -6,29 +6,32 @@
Whenever the bundler detects changes to any of the JavaScript files in your project, it'll bundle `app/javascript/application.js` into `app/assets/builds/application.js` (and all other entry points configured). You can refer to the build output in your layout using the standard asset pipeline approach with `<%= javascript_include_tag "application", defer: true %>`.
When you deploy your application to production, the `javascript:build` task attaches to the `assets:precompile` task to ensure that all your package dependencies from `package.json` have been installed via yarn, and then runs `yarn build` to process all the entry points, as it would in development. The latter files are then picked up by the asset pipeline, digested, and copied into public/assets, as any other asset pipeline file.
-This also happens in testing where the bundler attaches to the `test:prepare` task to ensure the JavaScript has been bundled before testing commences. (Note that this currently only applies to rails `test:*` tasks (like `test:all` or `test:controllers`), not "rails test", as that doesn't load `test:prepare`).
+This also happens in testing where the bundler attaches to the `test:prepare` task to ensure the JavaScript has been bundled before testing commences. If your testing library of choice does not call the `test:prepare` Rake task, ensure that your test suite runs `javascript:build` to bundle JavaScript before testing commences.
-If your testing library of choice does not define a `test:prepare` Rake task, ensure that your test suite runs `javascript:build` to bundle JavaScript before testing commences.
-
That's it!
You can configure your bundler options in the `build` script in `package.json` or via the installer-generated `rollup.config.js` for rollup.js or `webpack.config.json` for Webpack (esbuild does not have a default configuration format, and we don't intend to use esbuild as an API in order to hack around it).
If you're already using [`webpacker`](https://github.com/rails/webpacker) and you're wondering if you should migrate to `jsbundling-rails`, have a look at [the high-level comparison](./docs/comparison_with_webpacker.md). If you're looking to migrate from webpacker, see the [migration guide](https://github.com/rails/jsbundling-rails/blob/main/docs/switch_from_webpacker.md).
If you want to use webpack features like [code splitting](https://webpack.js.org/guides/code-splitting/) and [hot module reloading](https://webpack.js.org/concepts/hot-module-replacement/), consider using the official fork of `webpacker`, [`shakapacker`](https://github.com/shakacode/shakapacker).
## Installation
-You must already have node and yarn installed on your system. You will also need npx version 7.1.0 or later. Then:
+You must already have node and yarn installed on your system. You will also need npx version 7.1.0 or later. Then run:
-1. Run `./bin/bundle add jsbundling-rails`
-2. Run `./bin/rails javascript:install:[esbuild|rollup|webpack]`
+```
+./bin/bundle add jsbundling-rails
+```
+```
+./bin/rails javascript:install:[esbuild|rollup|webpack]
+```
+
Or, in Rails 7+, you can preconfigure your new application to use a specific bundler with `rails new myapp -j [esbuild|rollup|webpack]`.
## FAQ
@@ -43,14 +46,16 @@
### How can I reference static assets in JavaScript code?
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, `<img src={Example} />`.
-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
JavaScript Bundling for Rails is released under the [MIT License](https://opensource.org/licenses/MIT).