Rails 7+importmap+esbuild自定义JS文件加载404错误求助

你同时混用了Importmap和esbuild两种JS资源管理方式，导致浏览器尝试单独请求未被预编译发布的自定义JS文件（如/assets/src/jquery），从而出现404错误。具体原因：

• 布局中使用javascript_importmap_tags，会让Importmap解析application.js里的相对路径import语句，将其视为独立的资源请求；
• 但你的自定义JS文件（src/、utility/等目录下的文件）仅通过esbuild打包到application.js中，并未单独发布到public/assets目录，所以浏览器找不到这些单独的文件。

选择以下任意一种统一的JS管理方式：

方式一：改用esbuild Bundle加载（推荐，已配置esbuild） #

1. 修改布局文件
   将layout.html中的javascript_importmap_tags替换回注释掉的javascript_include_tag：

   <%= javascript_include_tag "application", "data-turbo-track": "reload" %>
   <%# javascript_importmap_tags %>
   

2. 确认esbuild配置生效
   你的esbuild.config.js已设置bundle: true，会将application.js中所有相对路径的import打包到app/assets/builds/application.js文件中。执行预编译时，该文件会被发布到public/assets/builds/，页面加载时只需请求这一个文件，不会再单独请求其他自定义JS。

3. 确保预编译流程正确
   执行预编译前先运行esbuild构建：

   npm run build
   rails assets:precompile
   

   若希望Rails自动触发esbuild构建，可安装jsbundling-rails（Rails 7默认支持），它会在assets:precompile时自动执行npm run build。

方式二：继续使用Importmap（需配置本地文件映射） #

1. 在Importmap中注册本地JS文件
   修改config/importmap.rb，添加本地目录的自动pin：

   pin_all_from "app/assets/javascript/src", under: "src"
   pin_all_from "app/assets/javascript/utility", under: "utility"
   pin_all_from "app/assets/javascript/custom", under: "custom"
   pin_all_from "app/assets/javascript/controllers", under: "controllers"
   

2. 更新Manifest配置
   修改app/assets/config/manifest.js，确保本地JS文件被包含到预编译资源中：

   //= link_tree ../images
   //= link_tree ../builds
   //= link_tree ../javascript .js
   

3. 验证预编译结果
   执行rails assets:precompile后，检查public/assets目录下是否存在src/、utility/等目录及对应JS文件，确保这些文件能被浏览器访问到。

• 不要同时使用javascript_importmap_tags和javascript_include_tag加载主JS文件，避免资源加载冲突；
• 若使用esbuild，无需在importmap.rb中pin第三方包（如jquery、bootstrap），直接通过npm安装后在application.js中import即可，esbuild会将它们打包到最终文件中。

内容的提问来源于stack exchange，提问作者sparkle