Rails 6.1 刺激未加载资产管道

Question

我有一个用 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)。

我已经完成了一个 rails 刺激：安装和 rails importmap：安装，当我重新加载我的应用程序并尝试使用 hello_controller 刺激进行测试时，我被困在屏幕上，而不是“Hello World” ！”

我认为这个测试

<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>

配置/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/控制器/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 没有正确加载。

Answer 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 控制器示例也是如此。

Rails 6.1 刺激未加载资产管道

问题描述

1 个解决方案

解决方案1
0 2021-11-18 05:34:28

Rails 6.1 刺激未加载资产管道

问题描述

1 个解决方案

解决方案1 0 2021-11-18 05:34:28

解决方案1
0 2021-11-18 05:34:28