问题标签 [import-maps]

当使用带有导入映射的 Rails 7 时，我应该将只应由一个视图执行的代码放在哪里？

具体来说，我有一个视图需要在加载时运行一些 Javascript 代码。我的 Javascript 看起来像这样：

如何设置 Javascript 环境以使document.onreadystatechange代码仅由所需的视图执行？（当我将此代码放在由 导入的文件中时，几乎一切正常application.js，但随后它被每个视图执行。）

我怀疑答案是创建单独的 importmaps 和 importmap_tags；但是，我可以在 Rails 7 中找到任何关于如何做到这一点的演示。

问题

为什么 importmaps 命令生成的源不能与 Bootstrap 4.6.1 一起使用，但相同版本的 jquery 的修改源可以工作？

问题详情

我使用 importmaps 创建了一个 rails 7 应用程序来管理 javascript。

我正在手动固定旧版本的 Bootstrap (4.6.1)importmap.rb

当我运行 bin/importmap pin jquery以下被添加到importmap.rb

加载站点并查看 Chrome Web 工具会显示此错误消息，并且下拉菜单和手风琴等 jquery 功能不起作用

但是，当我手动将 jquery 源更新importmap.rb为

错误消息已解决，功能已恢复。

在我看来，来源几乎相同，它们都是 jquery 3.6.0

工作配置

application.js

importmap.rb

尝试使用 flatpickr 作为 UI 来使用 Rails 7.0.1 和 ruby​​ 3.1 设置日期字段。单击输入字段时，未呈现预期的 2 个月日历，实际上，浏览器网络选项卡中未注册任何内容。

在bin/importmap pin flatpickrrails将库固定到importmap.rb文件中的cdn之后：

application.js具有最初生成的import "controllers".

flatpickr_controller.rb是在 javascript/controllers 目录中创建的

视图部分调用：

而控制器设置

为什么日历不渲染？
我也对放置不同 flatpickr 选项的位置感到困惑：在控制器中，或直接放入表单日期元素中。

新领域：Rails 7.0.1、Ruby 3.1.0

rails new rails7app

bin/importmap pin bootstrap将引导程序添加到应用程序。

Bootstrap 是 js 和 css 的结合。bootstrap-icons似乎基本上是css。使用 yarn/npm 方法yarn install bootstrap-icons可以工作，但使用 Rails 7 并且没有 npmbin/importmap pin bootstrap-icons则不起作用。有点期待，因为这是css。

如何添加bootstrap-icons到基本的 Rails 7 应用程序？

有几个库是 Rails 7 下测试的重点（例如 zxing、flatpickr）。但是为了建立一个操作程序，有几个问题需要明确。

importmap 路由是首选路由。
但是，文档似乎（仅？）指向固定过程，有两个选项：选择 cdn 和在--download本地提供版本的选项。但是，如果一个人已经有一个 js 文件可以使用 - 可以将它集成到流程中吗？

同样，应该如何处理内联 javascript - 作为一个过程，我发现最好先从内联块开始，然后再将它们移动到控制器（如果有必要的话）。这可以实现吗？是否需要任何声明？

内联使用的示例脚本（当然是 jquery 语法），其中“定制”部分是与其相关的部分formData，可能仅在一页或两页上调用。

在应用程序中，我需要从 JS 文件（我正在使用 AudioContext API）中实例化音频文件，或多或少像这样：

此 JS 文件是加载在使用 importmap 和 Sprockets 的新 Rails 7 应用程序中的 Stimulus 控制器。

在开发环境中，JS 可以猜测路径，因为 Sprocket 将使用其规范名称（如/assets/audio/file.wav）为资产提供服务。但是，在生产环境中，在资产预编译期间，Sprockets 在文件名后添加了一个哈希，并且该文件将只能使用/assets/audio/file-f11ef113f11ef113f113.wav.

这个文件名不能被硬编码，因为它取决于预编译（从技术上讲，我可能会用哈希对路径进行硬编码，因为文件不会经常更改，但我不想假设任何关于这个哈希的内容）。

该文件在 Sprockets 在预编译期间生成的清单中被引用到公用文件夹中的其他资产。使用Rails.application.assets_manifest.files我可以访问清单数据并安全地进行映射。

这是我写的帮手：

但是我需要从 JS 文件中访问这些数据，并且由于清单的文件名中也有一个哈希，所以我的 JS 不能简单地加载它。

我当前的解决方案是将它包含在我的应用程序布局中，并且效果很好：

这个解决方案的问题是哈希是写在来自应用服务器的每一个 HTML 响应中，效率不高。此外，在运行时调用助手也是低效的：这是在运行时动态生成的，而这应该在部署构建期间静态完成。

我最初的想法是在.js.erbSprockets 在预编译时生成的文件中生成列表。所以我用这种方式重命名controllers/application.js并controllers/application.js.erb调用了助手：

JS 是由 Sprockets 正确生成的，但不知何故importmap看不到它，并且 JS 控制台显示以下错误：

我试图添加这一行config/initializers/assets.rb：

我试图添加这一行assets/manifest.js：

但这些都没有帮助。

所以我的问题是：如何静态地使用 importmap 和 Sprockets 从 JS 引用资产 URL？

我目前在 Rails 6.0.4 上，我想使用 Stimulus 来构建一个新页面。在升级到 Rails 7 之前还有很多工作要做，所以如果可能的话，我想在 Rails 6 中使用 importmaps 和刺激。但到目前为止，我还无法让刺激控制器工作。我按照以下步骤操作：

1. 更新 Gemfile 和包：

2.运行rails importmap:install

这给了我config/importmap.rb, 和app/javascript/application.js，它在配置文件中被固定为“应用程序”。

3.重命名当前application.js文件

我的 current application.jsis inside app/assets/application.js.coffee，所以我暂时将其重命名old_application.js.coffee为并更新application.html.haml为以下内容：

这似乎有效，当我渲染页面时它给了我以下导入映射：

4.运行rails stimulus:install

这给了我app/javascript/controllers带有index.js,application.js和hello_controller.js里面的文件夹。

它还更新config/importmap.rb为以下内容：

...以及我app/javascript/application.js的以下内容：

然后这给了我一个错误，说controllers/hello_controller.js没有预编译：

5.更新资产路径和预编译文件

由于这个问题，我们使用的是 sprockets 版本 3，升级到版本 4 也需要一些时间。因此，我更新了现有initializers/assets.rb文件以包含新的 javascript 文件夹和文件：

这解决了问题，并在渲染页面上为我提供了以下导入映射：

6. 用警报测试刺激控制器

我更改hello_controller.js为在连接时显示警报：

但是当我将它附加到一个元素上时，data-controller="hello"我什么也看不到，这表明刺激没有正确加载。

这是部分内容：

这给了我这个HTML：

谁能建议我可能会错过什么？如果我在 Rails 7 上启动一个新的 Rails 应用程序并像这样设置所有内容，它就可以正常工作。

使用 Rails 7 并导入地图。尝试使用一些自定义 JS 导入文件夹。

Uncaught TypeError: Failed to resolve module specifier "custom"在 Chrome 和FirefoxUncaught Error: Unable to resolve specifier 'custom' from [shim]上提供

有趣import "custom/script"的是工作正常。

我究竟做错了什么？

在带有 webpacker 的 rails 6 中，您可以在<%= javascript_pack_tag 'alerts' %>视图或模板中添加一个来注入一些 js。

这如何与导入地图和 Rails 7 一起使用？

我正在尝试在新的 Rails 7 应用程序上使用 Select2 并且正在努力如下：

我已将它固定到我的导入地图中并像这样导入它：

（当我运行 bin/importmap pin select2 时添加了最后两行）

（已将 jquery 和 select2 移到末尾和开头 - 没有改变任何事情）。

当我在表单中时，我可以使用 $ 访问元素，如下所示：

但是当我手动尝试 - 在控制台中 - 在元素上运行 select2() 时，会发生以下情况：

我确实检查了网络源（chrome 控制台），我可以从 gap.jspm.io 找到 npm:jquery@3.6.0/dist 和 npm:select2@4.1.0-rc.0/dist。我发现一些资源指向正在加载的多个 jquery 库，但是在控制台的网络源中我没有找到比上述更多的资源......