Rails 7以esbuild为JS打包器时如何自动加载Stimulus控制器文件

完全可以实现，不需要手动逐个注册控制器，借助esbuild原生支持的import.meta.glob批量导入能力即可完成配置，整体实现和官方importmap、Webpacker场景的自动加载行为完全一致，无额外第三方依赖。

具体配置步骤 #

• 编写控制器统一加载入口
  在app/javascript/controllers/index.js中写入以下代码：

// app/javascript/controllers/index.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

// 递归匹配controllers目录下所有符合*_controller.js命名规则的文件，eager模式表示构建时直接打包引入
const controllerModules = import.meta.glob("./**/*_controller.js", { eager: true })

Object.entries(controllerModules).forEach(([filePath, module]) => {
  // 按照Stimulus官方命名规则转换控制器注册名
  const controllerName = filePath
    .replace(/^\.\//, "") // 移除路径开头的./
    .replace(/_controller\.js$/, "") // 移除_controller.js后缀
    .replace(/\//g, "--") // 子目录分隔符替换为--
    .replace(/_/g, "-") // 文件名内的下划线替换为横杠

  application.register(controllerName, module.default)
})

window.Stimulus = application
export { application }

• 在应用入口引入加载逻辑
  在JS打包入口文件app/javascript/application.js中引入上述控制器入口文件即可：

// app/javascript/application.js
// 保留你原有的其他导入配置，比如@hotwired/turbo-rails等
import "./controllers"

匹配规则说明 #

配置完成后，控制器文件和注册名的映射关系和官方自动加载规则完全对齐：

• 根目录下的hello_controller.js注册为hello
• 子目录下的users/avatar_controller.js注册为users--avatar
• 文件名含下划线的clipboard_copy_controller.js注册为clipboard-copy

方案说明 #

• 该实现完全基于esbuild原生API，不需要安装额外的NPM包，构建性能无额外损耗
• 新增控制器时只需要按照命名规范放入对应目录，构建时会被自动识别加载，不需要手动修改注册代码
• 如果使用TypeScript编写控制器，只需要将glob匹配规则修改为./**/*_controller.ts即可，其余逻辑无需调整
• 之前importmap场景使用的@hotwired/stimulus-loading、Webpack场景使用的@hotwired/stimulus-webpack-helpers本质都是对应打包工具下的批量模块加载封装，当前方案和二者实现的功能完全对等。

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