Rails 6.1 刺激未加载资产管道

Question

I've got a large app written in Rails 6.1 which is still using the asset pipeline.我有一个用 Rails 6.1 编写的大型应用程序，它仍在使用资产管道。 I'm trying to convert it from using AngularJS (which is stored in the asset pipeline) to hotwire-rails.我正在尝试将其从使用 AngularJS（存储在资产管道中）转换为 hotwire-rails。 I've got turbo loaded and now I would like to get Stimulus working.我已经加载了涡轮增压，现在我想让 Stimulus 工作。

It's on Ruby 2.7.4 and I'm using the latest importmaps-rails (0.8.2), turbo-rails (0.8.3) and stimulus-rails (0.7.2).它在 Ruby 2.7.4 上运行，我使用的是最新的 importmaps-rails (0.8.2)、turbo-rails (0.8.3) 和stimulus-rails (0.7.2)。

I've done a rails stimulus:install and rails importmap:install and when I reload my app and test with trying to use the hello_controller stimulus doesn't run, I'm stuck with 'foo' on the screen instead of "Hello World!"我已经完成了一个 rails 刺激：安装和 rails importmap：安装，当我重新加载我的应用程序并尝试使用 hello_controller 刺激进行测试时，我被困在屏幕上，而不是“Hello World” ！”

I've got this test in my view我认为这个测试

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

app/javascript/controller/hello_controller.js app/javascript/controller/hello_controller.js

import { Controller } from "@hotwired/stimulus"

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

Gemfile;宝石文件；

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

Here is my application_html.erb file I'm loading for the separate hotwire views这是我为单独的热线视图加载的 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配置/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应用程序/javascript/application.js

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

app/javascript/controllers/application.js应用程序/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 }

Update更新

If I remove the following from my application_html.html.erb file then turbo stops working.如果我从 application_html.html.erb 文件中删除以下内容，则 turbo 将停止工作。

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

Update更新

Further debugging leads to me thinking my importmap-rails is not loading correctly.进一步的调试使我认为我的 importmap-rails 没有正确加载。

Answer 1

Solved my problem after I created a new rails app without webpack and tried getting importmap and asset pipeline javascript to work at the same time.在我创建了一个没有 webpack 的新 Rails 应用程序并尝试让 importmap 和资产管道 javascript 同时工作后解决了我的问题。

I found that my problems with my legacy project were;我发现我的遗留项目的问题是；

I was missing manifest.js我错过了 manifest.js

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

Rename application.js in asset pipeline to application_angularjs.js将资产管道中的 application.js 重命名为 application_angularjs.js
```
 cd app/assets/javascripts mv application.js application_angularjs.js
```
Change line in application.html.erb (from, to)更改 application.html.erb 中的行（从，到）
From从
```
<%= javascript_include_tag "application" %>
```
To到
```
<%= javascript_include_tag "application_angularjs" %>
```
Remove extra lines in application_html.erb删除 application_html.erb 中的多余行
```
<%= turbo_include_tags %> <%= javascript_include_tag "turbo", type: "module-shim" %>
```

After this it all came to life, importmap started working and so did my stimulus hello controller example.在此之后，一切都变得生动起来，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