Rails 6.1 刺激没有加载资产管道答案

【问题标题】：Rails 6.1 stimulus not loading with asset pipelineRails 6.1 刺激没有加载资产管道
【发布时间】：2021-12-28 01:02:26
【问题描述】：

我有一个用 Rails 6.1 编写的大型应用程序，它仍在使用资产管道。我正在尝试将其从使用 AngularJS（存储在资产管道中）转换为 hotwire-rails。我已经加载了涡轮增压器，现在我想让 Stimulus 工作。

它在 Ruby 2.7.4 上，我使用的是最新的 importmaps-rails (0.8.2)、turbo-rails (0.8.3) 和stimulus-rails (0.7.2)。

我已经完成了 railsstimulus:install 和 rails importmap:install，当我重新加载我的应用程序并尝试使用 hello_controller 刺激进行测试时，我在屏幕上卡住了“foo”而不是“你好，世界！”

我认为有这个测试

<div data-controller="hello">
  foo
</div>

app/javascript/controller/hello_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.textContent = "Hello World!"
  }
}

宝石文件；

gem 'importmap-rails',
gem 'hotwire-rails'
gem 'turbo-rails'
gem 'stimulus-rails'

这是我正在为单独的热线视图加载的 application_html.erb 文件

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application_html' %>
    <%= javascript_include_tag "application_html" %>
    <%= turbo_include_tags %>
    <%= javascript_include_tag "turbo", type: "module-shim" %>
    <%= javascript_importmap_tags %>
  </head>
  <body>
    <%= yield :javascript %>
    <%= yield %>
  </body>
</html>

config/importmap.rb

pin "application", preload: true
pin "@hotwired/stimulus", to: "stimulus.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "@hotwired/turbo-rails", to: "turbo.js"

app/javascript/application.js

import "controllers"
import "@hotwired/turbo-rails"

app/javascript/controllers/application.js

import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.warnings = true
application.debug    = false
window.Stimulus      = application

export { application }

更新

如果我从 application_html.html.erb 文件中删除以下内容，则 turbo 将停止工作。

<%= javascript_include_tag "application_html" %>
<%= turbo_include_tags %>
<%= javascript_include_tag "turbo", type: "module-shim" %>

更新

进一步调试导致我认为我的 importmap-rails 没有正确加载。

【问题讨论】：

标签： ruby-on-rails stimulusjs

【解决方案1】：

在我创建一个没有 webpack 的新 rails 应用程序并尝试让 importmap 和资产管道 javascript 同时工作后解决了我的问题。

我发现我的遗留项目的问题是；

我缺少 manifest.js

         //= link_tree ../images
         //= link_directory ../stylesheets .css
         //= link_tree ../../javascript .js
         //= link_tree ../../../vendor/javascript .js
         //= link_tree ../javascripts .js

将资产管道中的 application.js 重命名为 application_angularjs.js

        cd app/assets/javascripts
        mv application.js application_angularjs.js

application.html.erb 中的换行（从，到）

来自

<%= javascript_include_tag "application" %>

到

<%= javascript_include_tag "application_angularjs" %>

删除 application_html.erb 中多余的行

<%= turbo_include_tags %>
<%= javascript_include_tag "turbo", type: "module-shim" %>

这一切都开始了，importmap 开始工作，我的刺激 hello 控制器示例也开始工作。

【讨论】：