如何将所有JS控制器文件自动加载在Rails 7中，将Esbuild作为JavaScript Bundler加载

Question

我正在尝试配置Rails 7应用程序以自动加载所有JS刺激控制器。

我将Esbuild用作JavaScript Bundler。

如果我们将刺激与导入地图一起使用刺激，则集成将自动从app/javascript/Controllers中加载所有控制器文件。

// app/javascript/controllers/index.js

import { application } from "controllers/application"

import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

此@hotwired/impotulus-loading软件包来自importmap

# config/importmap.rb

pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

，但看起来@hotwired/strigulus-loading尚未发布到NPM和仅在Rails中仅与ImportMaps一起使用。

当我们将Web Packer用作JavaScript Bundler时，我们可以使用@hotwired/stimulus-webpack-helpers软件包以获取相同形式的自动加载行为。

// app/javascript/application.js

import { Application } from "@hotwired/stimulus"
import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"

window.Stimulus = Application.start()
const context = require.context("./controllers", true, /\.js$/)
Stimulus.load(definitionsFromContext(context))

但是，当我们使用eSbuild javascript bundler在官方刺激建议单独导入每个控制器的页面。

刺激也可以与其他构建系统一起使用，但没有支持控制器自动加载。相反，您必须在应用程序实例上明确加载和注册控制器文件：

// app/javascript/application.js

import { Application } from "@hotwired/stimulus"

import HelloController from "./controllers/hello_controller"
import ClipboardController from "./controllers/clipboard_controller"

window.Stimulus = Application.start()
Stimulus.register("hello", HelloController)
Stimulus.register("clipboard", ClipboardController)

，所以我的问题是：

是否可以将Rails 7用Esbuild作为JavaScript Bundler配置为加载所有JS app/javaScript/Controllers的刺激控制器文件会自动？

Answer 1

手动运行一个任务以包含所有刺激控制器

包括您在app/javascript/controllers/index.js文件中手动创建的新刺激控制器，您可以运行：

rails stimulus:manifest:update

---

自动包括新创建的刺激控制器

当您使用发电机从终端创建刺激控制器时，Rails将自动运行清单：更新命令，因此包括您的控制器在JS构建中。

rails generate stimulus controllerName

---

观看刺激控制器的实时文件更改

以观察刺激控制器的现场更改，需要额外的手表过程。安装Esbuild后，此附加的手表过程将附加到procfile.dev文件。

# Procfilde.dev

web: rails s -p 3000
css: yarn build:css --watch
js: yarn build --watch

纱线构建-Watch命令触发Packacke.json文件中指定的构建命令。

{
  "name": "myapplication",
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds"
   }
}