在 Rails 6 中使用 Import Maps 和 Stimulus

Question

我目前使用的是 Rails 6.0.4，我想使用 Stimulus 来构建一个新页面。 在升级到 Rails 7 之前还有很多工作要做，所以如果可能的话，我想在 Rails 6 中使用 importmaps 和 stimulus。 但到目前为止，我还没有能够让刺激 controller 发挥作用。 我遵循了以下步骤：

1. 更新 Gemfile 和 bundle：

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

2. 运行rails importmap:install

这给了我config/importmap.rb和app/javascript/application.js ，它们在配置文件中被固定为“应用程序”。

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

这似乎有效，当我呈现页面时它给了我以下导入 map：

{
  "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 版也需要一些时间。 因此，我更新了现有的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']

这解决了问题，并在渲染页面上为我提供了以下导入 map：

{
  "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. 带有警报的测试刺激 controller

我更改了hello_controller.js以在连接时显示警报：

import { Controller } from "@hotwired/stimulus"

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

但是当我将它附加到一个带有data-controller="hello"的元素时，我什么也没看到，这表明刺激没有被正确加载。

这是部分的：

.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 应用程序并像那样设置所有内容，它可以毫无问题地运行。

Answer 1

我遇到了同样的问题。 运行rails assets:clean和rails assets:clobber为我解决了这个问题。 抱歉，我不记得是哪一个成功了，因为我使用的是无能的狗方法。