如何在Ruby on Rails 7中声明全局JavaScript变量？

问题背景 #

在Rails 5中，通常会在app/assets/javascripts/application.js中这样声明全局变量：

// app/assets/javascripts/application.js (Rails 5)
var MY_GLOBAL_VAR = MY_GLOBAL_VAR || {};

但升级到Rails 7后，原有的app/assets/javascripts/目录不再作为默认JS资源目录，取而代之的是app/javascript/。尝试在app/javascript/application.js或重新创建旧目录声明变量后，浏览器控制台始终报错：

Uncaught ReferenceError: MY_GLOBAL_VAR is not defined

解决方法 #

1. 挂载变量到window对象

Rails 7默认使用ES模块（通过Importmap），模块内部的变量不会自动暴露为全局变量，需要显式挂载到window对象：
在app/javascript/application.js中添加以下代码：

// app/javascript/application.js
window.MY_GLOBAL_VAR = window.MY_GLOBAL_VAR || {};

完成后，MY_GLOBAL_VAR就会成为全局可用的对象，在浏览器控制台或其他JS文件中都能直接访问。

2. 在HTML布局中直接声明（适合简单场景）

如果不想修改JS模块文件，可以在Rails的布局文件（例如app/views/layouts/application.html.erb）的<body>末尾添加脚本标签：

<!-- app/views/layouts/application.html.erb -->
<script>
  window.MY_GLOBAL_VAR = window.MY_GLOBAL_VAR || {};
</script>

这种方式会在页面加载时直接初始化全局变量，无需依赖JS模块的加载顺序。

3. 确保Importmap配置正确

如果你的项目使用Rails 7默认的Importmap，需要确认以下配置是否正确：

• 在config/importmap.rb中确保包含：

  pin "application", preload: true
  

• 在布局文件application.html.erb中加载Importmap脚本：

  <%= javascript_importmap_tags %>
  

只有配置正确，app/javascript/application.js中的代码才能被正确执行，全局变量才能生效。

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