如何在.js.erb视图中访问Webpacker打包的JavaScript？

这个问题的核心在于Webpacker的模块化作用域和.js.erb的全局执行上下文不兼容：Asset Pipeline会把所有JS直接暴露到全局window对象，而Webpack默认会将代码封装在模块作用域里——哪怕你用了ProvidePlugin，它也只是在Webpack打包的模块内部自动注入jQuery，不会把$或jQuery挂载到全局。

下面是具体的解决步骤：

1. 显式将需要的变量暴露到全局 #

打开你的app/javascript/packs/application.js，在导入jQuery的位置（如果没导入的话先添加），手动把它挂载到window对象：

// 先确保导入了jQuery
import $ from 'jquery';

// 暴露到全局，让.js.erb能访问到
window.$ = $;
window.jQuery = $;

当页面加载完Webpack打包的application.js后，$就会成为全局变量，.js.erb模板里的代码就能正常调用它了。

2. 验证你的Webpack配置（可选补充） #

你现有的ProvidePlugin配置是没问题的，它的作用是让Webpack在打包的模块里自动识别$和jQuery并注入，不用每个模块都手动import。但它不会自动全局暴露，所以上面的手动挂载是必须的。

举个实际场景：你的create.js.erb里的代码：

$('form').prepend("<%=j form_errors(object) %>")

在完成全局暴露后，浏览器执行这段代码时就能找到全局的$，不会再抛出ReferenceError。

额外提示 #

如果你使用了Turbo（原Turbolinks），要确保你的全局暴露代码在Turbo加载时也能生效，可以把挂载代码放到Turbo的回调里：

import $ from 'jquery';
import { Turbo } from "@hotwired/turbo-rails";

document.addEventListener('turbo:load', () => {
  window.$ = $;
  window.jQuery = $;
});

这样即使页面通过Turbo刷新，全局变量也能保持可用。

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