时间戳

首页 > 解决方案 > Rails 6.1 刺激没有加载资产管道

ruby-on-rails - Rails 6.1 刺激没有加载资产管道

问题描述

我有一个用 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”而不是“Hello World ！”

在我看来，我有这个测试

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

应用程序/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>

配置/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"

应用程序/javascript/application.js

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

应用程序/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-railsstimulusjs

解决方案

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

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

  1. 我错过了 manifest.js

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

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

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

  3. 更改 application.html.erb 中的行（从，到）

    从

    <%= javascript_include_tag "application" %>

    至

    <%= javascript_include_tag "application_angularjs" %>

  4. 删除 application_html.erb 中的多余行

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

在这一切都变得生动起来之后，importmap 开始工作，我的刺激 hello 控制器示例也开始工作。

推荐阅读