Rails7集成Backbone.js初始化路由报错：Router不是构造函数

核心问题梳理 #

你遇到的几个错误根源集中在模块加载冲突、代码执行顺序、CoffeeScript语法错误三个关键点：

1. App is not defined：路由文件执行时，全局App对象还未初始化
2. Unexpected token '.'：对象嵌套定义的时机错误，导致语法解析失败
3. MyRouter is not a constructor：路由类未正确挂载到App命名空间，或加载顺序颠倒

分步修复方案 #

1. 解决Rails7模块加载冲突 #

你的script标签使用了type="module"，但同时用了Sprockets的//= require机制，两者会产生加载隔离问题（ES模块内的变量不会自动挂载到window）。修改index.html.haml：

- content_for :javascript do
  - javascript_include_tag 'backbone/estimate_repair', defer: true
  # 移除type="module"，保证全局变量能被依赖文件访问

2. 调整App对象初始化顺序 #

先定义全局App结构，再加载依赖文件，确保路由等模块能正确挂载：

// 先初始化全局App命名空间
window.App = {
  Models: {},
  Collections: {},
  Routers: {
    Maintenances: {}
  },
  Views: {},
  init: function() {
    new App.Routers.Maintenances.MyRouter();
    Backbone.history.start();
  }
};

// 再加载所有依赖文件
//= require ./templates
//= require ./templates/maintenances/estimate_repair
//= require ./models
//= require ./views
//= require ./views/maintenances/estimate_repair
//= require ./routers

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function() {
  App.init();
});

3. 修复CoffeeScript语法错误 #

修正路由文件中的拼写与命名空间问题：

# 确保Maintenances命名空间存在
App.Routers.Maintenances = App.Routers.Maintenances || {}

# 正确定义路由类（注意class后的方法缩进）
class App.Routers.Maintenances.MyRouter extends Backbone.Router
  initialize: (options = {}) ->
    # 修复newApp的拼写错误，改为new App
    @estimate_router_view = new App.Views.Maintenances.EstimateRepair.MyView()

4. 确认路由文件加载路径 #

在routers目录下新建index.js，确保//= require ./routers能正确加载到目标路由：

// app/javascript/backbone/routers/index.js
//= require ./maintenances/MyRouter

关键注意事项 #

• Rails7中若使用ES模块，建议用import/export替代Sprockets的//= require，避免全局变量污染
• 依赖加载顺序必须严格遵循：先定义命名空间，再加载模型、视图、路由，最后执行初始化
• CoffeeScript对缩进和语法要求严格，需确保类方法缩进、变量拼写准确

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