使用 Import Maps 和 Stimulus 在 Rails 6 中。

Question

我目前使用的是Rails 6.0.4版本，想要使用Stimulus构建一个新页面。在升级到Rails 7之前，还有很多工作要做，因此如果可能的话，我想在Rails 6中使用importmaps和stimulus。但是到目前为止，我无法让stimulus控制器正常工作。我按照以下步骤操作：

1. 更新Gemfile并运行bundle命令：

gem 'importmap-rails'
gem 'stimulus-rails'

2. 运行 rails importmap:install

这会给我生成 config/importmap.rb 和 app/javascript/application.js，其中在配置文件中将其固定为“application”。

3. 重命名当前的 application.js 文件

我当前的 application.js 文件位于 app/assets/application.js.coffee 中，因此我将其重命名为 old_application.js.coffee，并且更新了 application.html.haml 如下：

= javascript_include_tag "old_application", defer: true
= javascript_importmap_tags

这似乎有效，并且在我渲染页面时，它给了我以下的导入映射：

{
  "imports": {
    "application": "/assets/application-920fceca960b509c1e98c9b27d167fa368d4b588ceb1be42d1667552714f94d5.js"
  }
}

4.运行rails stimulus:install

这将为我创建app/javascript/controllers文件夹，其中包含index.js、application.js和hello_controller.js。

它还更新了config/importmap.rb文件如下:

pin "application", 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"

我将我的app/javascript/application.js文件更改为以下内容：

import "controllers"

---

这给我带来了一个错误，说controllers/hello_controller.js没有预编译：

5. 更新资源路径和预编译文件

我们正在使用 sprockets 的第 3 版本，升级到第 4 版本也需要一些时间，因为this issue的原因。所以我更新了现有的 initializers/assets.rb 文件，包括新的 javascript 文件夹和文件：

Rails.application.config.assets.paths << Rails.root.join('app', 'javascript', 'controllers')
Rails.application.config.assets.precompile += ['application.js', 'controllers/index.js', 'controllers/application.js', 'controllers/hello_controller.js']

这解决了问题，并在呈现的页面上为我提供了以下导入映射：

{
  "imports": {
    "application": "/assets/application-920fceca960b509c1e98c9b27d167fa368d4b588ceb1be42d1667552714f94d5.js",
    "@hotwired/stimulus": "/assets/stimulus.min-c5a29ae8ade968ede2149a7e76a29d0756a87cef66959113681098e5923ba26b.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-6b29b7e0382bd421ac62df99b46f45072fd3962208fbf0b2522041b4d037bbd9.js",
    "controllers/hello_controller": "/assets/hello_controller-8cddac086717993eeda2cc8af3be73bc3a6ecfb07212600aeed8ce8122fffa34.js",
    "controllers": "/assets/index-7445df4dc00776a5e3496034da4bc5906891c342c89c0e6a7775b1498b8222d8.js",
    "controllers/application": "/assets/application-5703baa647baaa5a3da21d4e61aa5686824d0e0ab82c2ba11f5c963cc8414a8f.js"
  }
}

6. 使用警报测试刺激控制器

我更改了 hello_controller.js，使其在连接时显示一个警报：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    alert('Hello World!')
  }
}

但是当我将其附加到带有 data-controller="hello" 的元素时，我什么也看不到，这表明 stimulus 没有正确加载。

以下是该部分的部分内容：

.home-container{data: { controller: 'hello' }}
  %section
    .container

这给了我这个HTML：

<div class="home-container" data-controller="hello">
  <section>
    <div class="container">
    </div>
  </section>
<div>

有人能否建议我可能遗漏了什么？如果我在Rails 7上启动一个新的Rails应用程序，并像那样设置一切，它就可以正常工作。

- Adam Colvin

---

你能分享带有 data-controller='hello' 的视图或部分给这个问题吗？ - Joe Thor

@JoeThor 是的，我已经更新了帖子，并附上了部分代码和它所生成的HTML。谢谢。 - Adam Colvin

Answer 1

我遇到了同样的问题。运行 rails assets:clean 和 rails assets:clobber 解决了我的问题。抱歉，我记不清哪个有效了，因为我采用了无知狗的方法。

- bunufi