Rails 7添加自定义JavaScript函数失败，请求排查问题

我按照Stack Overflow教程在Rails 7项目中添加自定义JavaScript函数，配置完成后JS文件已正常加载，但点击调用链接时控制台报错Uncaught ReferenceError: btn_project_show is not defined。

我的配置如下：

目录结构 #

.
├── application.js
├── controllers
│   ├── application.js
│   ├── hello_controller.js
│   └── index.js
└── custom
    └── index.js

2 directories, 5 files

app/javascript/application.js #

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "custom"

app/javascript/custom/index.js #

function btn_project_show() {
    alert('culodemono');    
}

config/importmap.rb #

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/javascript/custom", under: "custom"

调用代码 #

<a class="btn" href="javascript: btn_project_show();">

问题原因 #

Rails 7 使用 Importmap 时，所有 JavaScript 文件默认作为ES模块加载。ES模块的作用域是独立的，模块内部定义的函数、变量不会自动暴露到全局作用域，所以通过javascript:伪协议调用时找不到该函数。

解决方案 #

方案1：将函数挂载到全局window对象 #

修改app/javascript/custom/index.js，把函数绑定到window对象上，使其成为全局可访问的函数：

function btn_project_show() {
    alert('culodemono');    
}

// 显式挂载到全局window对象
window.btn_project_show = btn_project_show;

方案2：使用事件监听替代内联javascript调用（更推荐） #

避免使用javascript:伪协议，改用DOM事件监听的方式，更符合现代JS规范：

1. 修改视图中的链接，添加ID并移除内联JS：

<a class="btn" id="project-show-btn" href="#">触发测试</a>

2. 修改app/javascript/custom/index.js，添加事件监听：

function btn_project_show() {
    alert('culodemono');    
}

// 等待DOM加载完成后绑定点击事件
document.addEventListener('DOMContentLoaded', function() {
  const btn = document.getElementById('project-show-btn');
  if (btn) {
    btn.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认的链接跳转行为
      btn_project_show();
    });
  }
});

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