Rails 7使用jsbundling-rails时自定义JS函数未编译无法调用问题

问题出在ES模块的默认作用域规则，和jsbundling-rails本身无关。
jsbundling-rails搭配的esbuild/rollup/webpack打包器会把每个JS文件作为独立ES模块处理，模块内声明的变量、函数默认仅在模块作用域内生效，不会自动注册到浏览器全局window对象下。不管是直接声明函数，还是加export关键字导出，函数都不会变成全局可调用的方法：export的作用仅为允许其他ES模块通过import语法引入该函数，不会做全局暴露，因此在页面行内脚本、DOM事件属性里直接调用会报找不到函数的错误。
你之前写的顶层alert("HI")能正常触发，是因为这行代码属于模块加载时就会执行的顶层语句，不需要外部跨作用域调用，所以不受作用域限制。

根据你的使用场景选对应方案即可：

方法1：手动挂载到全局window（适合少量需要全局调用的工具函数） #

这是最简单直接的方案，在定义函数的位置，把需要外部调用的函数明确挂载到window对象上即可，不需要额外加export：

// app/javascript/controllers/application.js
function hello() {
  alert("hello");
}
// 暴露为全局可调用方法
window.hello = hello;

重新编译刷新页面后，就可以在页面任意位置直接调用hello()了。

方法2：使用Stimulus控制器绑定交互（Rails 7官方推荐方案） #

Rails 7默认集成Stimulus作为JS交互方案，不推荐写大量全局函数，避免全局命名空间污染。这种方案不需要暴露任何全局方法，直接通过DOM属性绑定交互逻辑：

1. 生成对应Stimulus控制器：

rails generate stimulus greeting

2. 在控制器内编写交互逻辑：

// app/javascript/controllers/greeting_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  hello() {
    alert("hello")
  }
}

3. 在页面HTML中绑定触发逻辑：

<div data-controller="greeting">
  <button data-action="click->greeting#hello">点击弹出提示</button>
</div>

点击按钮就会直接触发对应方法，完全不需要全局函数，是Rails项目的首选写法。

如果按上述方案配置后仍然无法正常调用，可以按以下顺序定位问题：

• 确认jsbundling的编译监听进程正常运行，修改JS文件后能触发自动重编译，检查app/assets/builds目录下的打包产物是否同步更新
• 打开浏览器开发者工具Console面板，直接输入window.hello回车，若返回undefined说明函数未成功挂载到全局，检查代码是否被正确打包、是否被条件逻辑拦截
• 检查Console面板是否有提前抛出的JS语法错误、运行时错误，这类错误会中断脚本执行，导致后面的全局挂载代码不生效
• 检查Network面板，确认页面已经正确加载最新的打包后JS文件，没有强缓存、404之类的加载问题

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