Serving JavaScript files with Rails 7 and esbuild - Stack Overflow

admin管理员组

文章数量:1415119

I am using Rails 7 with esbuild, jsbundling-rails, and importmap-rails. I am using the following command to start the esbuild watcher:

esbuild app/javascript/*.* --bundle --sourcemap --format=esm \
  --outdir=app/assets/builds --public-path=/assets --watch=forever

Most of my JavaScript code is structured as ESM modules. These are not referenced in app/javascript/application.js.

With this setup, I have observed the following:

• esbuild is not compiling ESM modules into app/assets/builds. The only file that generates there is application.js, which (after compilation) contains my legacy, non-ESM code.

• javascript_include_tag "application", type: "module" generates a URL to [host]/javascripts/application.js.

• javascript_importmap_tags generates an import map with entries like "application": "/application.js".

• The Rails development server doesn't appear to be serving files from app/assets/builds. I have tried sending HTTP requests to [host]/application.js, [host]/javascripts/application.js, [host]/assets/application.js, and [host]/assets/builds/application.js. All of these paths return 404.

Some of the above may be the way Rails is designed to work. But I'm clearly doing something wrong, because I can't generate working URLs to any JavaScript files, whether manually or with helpers.

What I would have expected to see is:

• The Rails development server serves JavaScript files from whatever folder esbuild compiles into. (In this case, app/assets/builds.)

• All JavaScript files, including ESM modules, get compiled into the destination folder.

• The helpers javascript_include_tag and javascript_importmap_tags generate working URLs for JavaScript files.

I want to follow the most bog-standard conventions for a modern Rails app. I am not wedded to any of the dependencies I have identified above. But I do want some sort of JavaScript build stage (partly so that I can start using TypeScript). Nor am I wedded to compiling into app/assets/builds: I chose that folder only because I understood that to be the convention.

With that in mind, my questions are:

• Is the setup I've described consistent with the typical conventions for a Rails 7 app that needs a JavaScript build stage?

• Do import maps and esbuild complement each other, or should I pick just one? Relatedly, should I be using both javascript_include_tag and javascript_importmap_tags?

• What should I change so that I can generate working URLs for my JavaScript files?

本文标签： Serving JavaScript files with Rails 7 and esbuildStack Overflow