Rails 7迁移后出现资产管道中不存在'transportation_calculator.js'错误

核心原因 #

在Rails 7的jsbundling+Webpack模式中，Webpack会将JavaScript文件打包到app/assets/builds目录，只有该目录下的文件才会被资产管道（Asset Pipeline）识别。你直接引用transportation_calculator.js，但该文件要么未被Webpack打包到builds目录，要么引用路径不正确。

解决方案 #

方案1：将transportation_calculator.js设为单独Webpack入口 #

如果这个文件需要独立加载（不合并到application.js），按以下步骤操作：

1. 修改webpack.config.js的入口配置，添加该文件：

entry: {
  application: [
    './app/javascript/application.js',
    './app/assets/stylesheets/application.scss',
  ],
  // 假设你的文件位于app/javascript/transportation_calculator.js，根据实际路径调整
  transportation_calculator: './app/javascript/transportation_calculator.js'
}

2. 重启开发服务器或重新打包资源：
   • 开发环境：运行bin/dev（确保Webpack实时编译）
   • 生产环境：运行rails assets:precompile
3. 修改Haml页面的引用代码（去掉.js后缀，Rails会自动处理打包后的文件）：

= javascript_include_tag 'transportation_calculator', "data-turbolinks-track": "reload", defer: true

方案2：将transportation_calculator.js导入到application.js（推荐） #

如果该文件不需要独立加载，直接合并到主入口文件更简洁：

1. 在app/javascript/application.js中导入该文件：

// 根据文件实际相对路径调整
import './transportation_calculator'

2. 移除Haml页面中单独的javascript_include_tag 'transportation_calculator.js'
3. 重新打包资源（开发环境重启bin/dev，生产环境执行rails assets:precompile）

关键检查点 #

• 确认transportation_calculator.js的位置：jsbundling默认处理app/javascript下的文件，如果你的文件在app/assets/javascripts，建议移动到app/javascript目录，或调整Webpack的resolve配置包含该路径。
• 验证app/assets/builds目录：打包后该目录下应该生成transportation_calculator.js（开发环境）或带哈希的版本（生产环境）。
• 确认manifest.json中的//= link_tree ../builds配置已存在，你的配置已经包含这一行，无需修改。

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