Rails 7自定义资源目录下ESBuild编译资源引用失败问题

1. 确认ESBuild编译路径与输出结构 #

确保ESBuild脚本将TypeScript/SASS文件编译后，输出路径和目录结构与源文件对应，且目标目录能被Rails资产管道识别。

比如把编译脚本放在package.json的scripts中：

"scripts": {
  "build:js": "esbuild app/assets/ts/**/*.ts --outdir=app/assets/builds --bundle --sourcemap --target=es2020",
  "build:css": "esbuild app/assets/scss/**/*.scss --outdir=app/assets/builds --bundle --sourcemap --loader:.scss=css"
}

执行npm run build:js后，app/assets/ts/math/calculate.ts会被编译到app/assets/builds/math/calculate.js，完整保留原有的math子目录结构，源文件目录不受影响。

2. 修正资产管道的manifest配置 #

在app/assets/config/manifest.js中添加对编译后目录的引用，让资产管道识别这些文件：

// app/assets/config/manifest.js
// 保留原有配置，新增以下行
link_tree 'builds'

3. 验证资产管道加载路径（可选） #

如果仍报错，检查config/initializers/assets.rb，确保编译后的目录被加入资产路径：

# config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'builds')

4. 清理缓存并测试 #

执行以下命令清理资产缓存，确保新配置生效：

rails assets:clean
rails tmp:clear

重启服务器后，原有的javascript_include_tag引用即可正常工作。

内容的提问来源于stack exchange，提问作者A. Vreeswijk