[英]Use Import Maps and Stimulus with Rails 6
I'm currently on Rails 6.0.4 and I want to use Stimulus to build a new page.我目前使用的是 Rails 6.0.4,我想使用 Stimulus 来构建一个新页面。 There's a lot of work still to do before upgrading to Rails 7, so I want to use importmaps and stimulus with Rails 6 if possible.
在升级到 Rails 7 之前还有很多工作要做,所以如果可能的话,我想在 Rails 6 中使用 importmaps 和 stimulus。 But so far I haven't been able to get a stimulus controller working.
但到目前为止,我还没有能够让刺激 controller 发挥作用。 I followed these steps:
我遵循了以下步骤:
gem 'importmap-rails'
gem 'stimulus-rails'
rails importmap:install
rails importmap:install
This gave me config/importmap.rb
, and app/javascript/application.js
, which was pinned as "application" in the config file.这给了我
config/importmap.rb
和app/javascript/application.js
,它们在配置文件中被固定为“应用程序”。
application.js
file application.js
文件My current application.js
is inside app/assets/application.js.coffee
, so I renamed this to old_application.js.coffee
for the time being and updated application.html.haml
to the following:我当前的
application.js
位于app/assets/application.js.coffee
中,所以我暂时将其重命名为old_application.js.coffee
并将application.html.haml
更新为以下内容:
= javascript_include_tag "old_application", defer: true
= javascript_importmap_tags
This seemed to work and it gave me the following import map when I rendered the page:这似乎有效,当我呈现页面时它给了我以下导入 map:
{
"imports": {
"application": "/assets/application-920fceca960b509c1e98c9b27d167fa368d4b588ceb1be42d1667552714f94d5.js"
}
}
rails stimulus:install
rails stimulus:install
This gave me the app/javascript/controllers
folder with index.js
, application.js
and hello_controller.js
inside.这给了我
app/javascript/controllers
文件夹,其中包含index.js
、 application.js
和hello_controller.js
。
It also updated config/importmap.rb
to the following:它还将
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"
... and my app/javascript/application.js
to the following: ...和我的
app/javascript/application.js
到以下内容:
import "controllers"
This then gives me an error, saying that controllers/hello_controller.js
has not been precompiled:然后这给了我一个错误,说
controllers/hello_controller.js
没有被预编译:
We're on version 3 of sprockets, and upgrading to version 4 will also take some time, due to this issue .由于这个问题,我们使用的是 sprockets 的第 3 版,升级到第 4 版也需要一些时间。 So instead I updated the existing
initializers/assets.rb
file to include the new javascript folder and files:因此,我更新了现有的
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']
This fixed the issue and gives me the following import map on the rendered page:这解决了问题,并在渲染页面上为我提供了以下导入 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"
}
}
I changed hello_controller.js
to show an alert when it's connected:我更改了
hello_controller.js
以在连接时显示警报:
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
alert('Hello World!')
}
}
But when I attach this to an element with data-controller="hello"
I don't see anything, suggesting that stimulus hasn't been correctly loaded.但是当我将它附加到一个带有
data-controller="hello"
的元素时,我什么也没看到,这表明刺激没有被正确加载。
This is the partial for that:这是部分的:
.home-container{data: { controller: 'hello' }}
%section
.container
Which gives me this HTML:这给了我这个 HTML:
<div class="home-container" data-controller="hello">
<section>
<div class="container">
</div>
</section>
<div>
Can anyone suggest what I might be missing?谁能建议我可能会遗漏什么? If I start a new rails app on Rails 7 and set everything up like that, it works without a problem.
如果我在 Rails 7 上启动一个新的 Rails 应用程序并像那样设置所有内容,它可以毫无问题地运行。
I was experiencing the same issue.我遇到了同样的问题。 Running
rails assets:clean
and rails assets:clobber
solved the issue for me.运行
rails assets:clean
和rails assets:clobber
为我解决了这个问题。 Sorry, I do not remember which one did the trick, as I was applying the clueless dog approach.抱歉,我不记得是哪一个成功了,因为我使用的是无能的狗方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.