- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试使用 importmap-rails 在 rails 7 中添加 view_component。
我认为这很简单:
config/initializers/assets.rb
与:Rails.application.config.assets.paths << Rails.root.join('app', 'components')
app/assets/config/manifest.js
与://= link_tree ../../components .js
.config/importmap.rb
与:pin_all_from "app/components", preload: true
.然后我执行了这个命令,bin/importmap json
, 检查是否一切正常:
{
"imports": {
"application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
"@hotwired/turbo-rails": "/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js",
"@hotwired/stimulus": "/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-e6261367928db8327c9ed7b698df4a65be8e60f1e405dd2831e4fab49f716e56.js",
"@hotwired/stimulus-importmap-autoloader": "/assets/stimulus-importmap-autoloader-b2f78229539fa8488bcc30c90ec212a3c2558a7ad04cbc9d43f3ecd85c5671f3.js",
"controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
"controllers/foo_controller": "/assets/controllers/foo_controller-45f660adade47dc60929737489aaf6a096ec0bdefa5dc52e509d79ee66982a6c.js",
"controllers": "/assets/controllers/index-c3026cd9f10d126c4d910db40cdee4112b916f0b357ed0d0489c4c493627d462.js",
"foo/bar_component_controller": "/assets/foo/bar_component_controller-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js",
"foo_component_controller": "/assets/foo_component_controller-0e1379f58b8281a0e5ac54ad8748d2bce7b5da5ddbcb72d91895cf97e47060f2.js"
}
}
我在最后一行看到了我的 foo_component_controller.js,这是我为 view_component 创建的文件。好的,一切似乎都很好,但 UI 上没有任何反应,为什么?
我忘了更新app/javascript/controllers/index.js
.我需要告诉 stimulus-rails 在“app/view_components”文件夹中注册所有 Controller 。
我的第一个想法是添加 eagerLoadControllersFrom("components", application)
到“app/javascript/controllers/index.js”并从 pin_all_from "app/components", preload: true
更新我在 importmap 中的配置至 pin_all_from "app/components", under: "components", preload: true
,但我注意到,在运行 bin/importmap json
之后,文件丢失了:
{
"imports": {
"application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
"@hotwired/turbo-rails": "/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js",
"@hotwired/stimulus": "/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-e6261367928db8327c9ed7b698df4a65be8e60f1e405dd2831e4fab49f716e56.js",
"@hotwired/stimulus-importmap-autoloader": "/assets/stimulus-importmap-autoloader-b2f78229539fa8488bcc30c90ec212a3c2558a7ad04cbc9d43f3ecd85c5671f3.js",
"controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
"controllers/foo_controller": "/assets/controllers/foo_controller-45f660adade47dc60929737489aaf6a096ec0bdefa5dc52e509d79ee66982a6c.js",
"controllers": "/assets/controllers/index-c3026cd9f10d126c4d910db40cdee4112b916f0b357ed0d0489c4c493627d462.js"
}
}
为什么?让我们谈谈链轮。更准确地说,让我们谈谈尝试查找文件的方法:
def resolve_logical_path(paths, logical_path, accept)
extname, mime_type = PathUtils.match_path_extname(logical_path, config[:mime_exts])
logical_name = logical_path.chomp(extname)
extname, pipeline = PathUtils.match_path_extname(logical_name, config[:pipeline_exts])
logical_name = logical_name.chomp(extname)
parsed_accept = parse_accept_options(mime_type, accept)
transformed_accepts = expand_transform_accepts(parsed_accept)
filename, mime_type, deps, index_alias = resolve_under_paths(paths, logical_name, transformed_accepts)
if filename
deps << build_file_digest_uri(filename)
type = resolve_transform_type(mime_type, parsed_accept)
return filename, type, pipeline, deps, index_alias
else
return nil, nil, nil, deps
end
end
变量路径包含应用程序的所有 Assets 路径,示例:
["/home/pedro/tempo-livre/importmap-view-component-stimulus/app/assets/config",
"/home/pedro/tempo-livre/importmap-view-component-stimulus/app/assets/images",
"/home/pedro/tempo-livre/importmap-view-component-stimulus/app/assets/stylesheets",
"/home/pedro/tempo-livre/importmap-view-component-stimulus/lib/assets/javascript",
"/home/pedro/.rvm/gems/ruby-3.1.2/gems/view_component-2.59.0/app/assets/vendor",
"/home/pedro/.rvm/gems/ruby-3.1.2/gems/stimulus-rails-1.1.0/app/assets/javascripts",
"/home/pedro/.rvm/gems/ruby-3.1.2/gems/turbo-rails-1.1.1/app/assets/javascripts",
"/home/pedro/.rvm/gems/ruby-3.1.2/gems/actionview-7.0.3.1/lib/assets/compiled",
"/home/pedro/tempo-livre/importmap-view-component-stimulus/app/components",
"/home/pedro/tempo-livre/importmap-view-component-stimulus/app/javascript",
"/home/pedro/tempo-livre/importmap-view-component-stimulus/vendor/javascript"]
在最后几行中,我们可以看到 app/components
正如预期的那样,但是“logical_paths”包含“components/foo_component_controller.js”并且它找不到该文件,因为它连接了两个字符串导致:
/home/pedro/tempo-livre/importmap-view-component-stimulus/app/components/components/foo_component_controller.js
.
文件夹组件出现两次。
如果我们在 javascript/controllers 中创建一个 Controller ,则 logical_paths 变量将为 controllers/foo_controller.js
.结果:
/home/pedro/tempo-livre/importmap-view-component-stimulus/app/javascript/controllers/foo_controller.js
.完美的道路。这就是它起作用的原因。
我卡住了。似乎有必要做出贡献以使这项工作正常进行,我很乐意这样做,但我想知道是否有人找到了另一种方法。也许我错过了什么。我可能是错的,因为我不太了解 ViewComponent + SprocketRails + ImportmapRails + StimulusRails。
最佳答案
您可以自己为组件 Controller 创建引脚:
# config/importmap.rb
components_path = Rails.root.join("app/components")
components_path.glob("**/*_controller.js").each do |controller|
name = controller.relative_path_from(components_path).to_s.remove(/\.js$/)
pin "components/#{name}", to: name
# ^ ^
# | |
# match what '- with what `sprockets` expects
# `eagerLoadControllersFrom`
# expects
end
# app/javascript/controllers/index.js
import { application } from "controllers/application"
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("components", application)
# config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join("app/components")
# app/assets/config/manifest.js
//= link_tree ../../components .js
@mingle 这是个好主意:
# config/environments/development.rb
config.importmap.cache_sweepers << Rails.root.join("app/components")
有关pin
和pin_all_from
的一些详细信息:https://stackoverflow.com/a/72855705/207090
关于javascript - 如何使 ViewComponent 与 Importmap-Rails 一起工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73223634/
这里是一个轻量级的 Ubuntu 用户(WSL)。 我在 rails 7 中发出了命令(即使作为 root 用户)bin/importmap pin bootstrap和 ./bin/importma
我用 webpack 创建了一个 javascript 库,它输出一个 systemjs 模块。这个模块依赖于我指定为外部的 react。 生成的 javascript 文件如下所示: System.
./bin/importmap pin jquery 使用这个命令固定 jquery 在application.js文件中 import jquery from "jquery" window.jQu
我有 Spring RESTfull 应用程序,我想为它生成一个 API。我从那里使用 gradle 配置 https://github.com/Casturan/swagger-gradle-exa
我尝试使用 importmap-rails 在 rails 7 中添加 view_component。 我认为这很简单: 更新config/initializers/assets.rb与:Rails.
我尝试使用 importmap-rails 在 rails 7 中添加 view_component。 我认为这很简单: 更新config/initializers/assets.rb与:Rails.
这两个声明在Golang项目 Bazel BUILD 文件中具有什么不同功能。 示例场景: go_library( name = "go_default_library", srcs
我最近将一个应用程序升级到了 Rails 7,我正在为我的所有 javascript 使用 importmap-rails。以前该应用程序使用 Webpacker,除了自定义 Trix 工具栏以将下划
当使用带有导入映射的 Rails 7 时,我应该将只应由一个 View 执行的代码放在哪里? 具体来说,我有一个 View 需要在加载时运行一些 Javascript 代码。我的 Javascript
我想在 Ruby on Rails 7 项目的页面中添加一个复制到剪贴板按钮。 config/importmap.rb: pin "clipboard.js", to: "https://cdn.js
我正在尝试在一个新的 Rails 7 应用程序上使用 Select2,但遇到如下困难: 我已将它固定到我的导入图中并像这样导入它: pin "application", preload: true p
这里的新领域:Rails 7.0.1、Ruby 3.1.0 rails new rails7app bin/importmap pin bootstrap 将 Bootstrap 添加到应用程序。 B
我正在尝试在一个新的 Rails 7 应用程序上使用 Select2,但遇到如下困难: 我已将它固定到我的导入图中并像这样导入它: pin "application", preload: true p
这里的新领域:Rails 7.0.1、Ruby 3.1.0 rails new rails7app bin/importmap pin bootstrap 将 Bootstrap 添加到应用程序。 B
我是一名优秀的程序员,十分优秀!