Rails7移除Sprockets后javascript_include_tag无法加载资产问题

当你移除Sprockets后，javascript_include_tag的默认行为会改变——它不再处理Sprockets的资产路径映射，而jsbundling-rails + esbuild的构建产物默认输出到public/build目录，这是核心矛盾点。以下是具体修复步骤：

1. 调整视图中的资产引用标签 #

替换原来的javascript_include_tag和stylesheet_link_tag，直接指向esbuild生成的产物路径：

<%# 替换原javascript_include_tag %>
<%= javascript_include_tag 'build/application', defer: true %>

<%# 对应的CSS标签也要调整 %>
<%= stylesheet_link_tag 'build/application', media: 'all' %>

defer: true是esbuild搭配Rails的推荐写法，确保脚本在DOM加载完成后执行。

2. 确认esbuild配置正确 #

检查项目根目录的package.json，确保build命令的输出路径和公共路径设置正确：

"scripts": {
  "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=public/build --public-path=/build"
}

其中--public-path=/build保证生成的sourcemap和资源引用路径与实际访问路径匹配。

3. 修正Rails应用配置 #

在config/application.rb中添加以下配置，明确关闭Sprockets并启用静态文件服务：

# 关闭Sprockets资产功能
config.assets.enabled = false
# 开启Rails内置的静态文件服务（处理public目录下的文件）
config.public_file_server.enabled = true

4. 验证构建与服务 #

• 开发环境：使用bin/dev启动服务，它会同时启动Rails服务器和esbuild的热监听进程，确保代码修改后自动重构资产。
• 生产/预编译环境：运行rails assets:precompile，它会自动触发npm run build（或yarn build）生成最新的资产文件到public/build。

5. 排查常见问题 #

• 查看浏览器控制台的404错误，确认请求的资源路径是否为/build/application.js（而非旧的/assets/application.js）。
• 检查public/build目录是否存在、文件是否完整，以及文件权限是否允许Web服务器读取。
• 清除浏览器缓存（Ctrl+F5硬刷新），避免旧缓存导致的路径不匹配问题。

内容的提问来源于stack exchange，提问作者Rafael Gomes Francisco