添加刺激和importmaps到现有的Rails 6.1应用程序

Question

我有一个从Rails 4升级到Rails 6.1的应用程序->5→6、所以很成熟。

它仍然使用资产管道，在未来的Rails 7.0中，我将保持这种方式。我想开始使用刺激+ importmaps，所以我跟着安装。

通过hotwire安装importmaps和stimulus后，我在加载应用程序时在Firefox 91中得到以下错误;

Uncaught SyntaxError: import declarations may only appear at top level of a module
Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”.

我importmap.rb

Rails.application.config.importmap.draw do
pin "@hotwired/stimulus", to: "stimulus.js"
pin "@hotwired/stimulus-importmap-autoloader", to: "stimulus-importmap-autoloader.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin "application"
# Use libraries available via the asset pipeline (locally or via gems). # Rails 7.0 required
# pin "@rails/actioncable", to: "actioncable.esm.js"     
# pin "@rails/activestorage", to: "activestorage.esm.js" 
# Use libraries directly from JavaScript CDNs (see https://www.skypack.dev, https://esm.sh, https://www.jsdelivr.com/esm)
# pin "vue", to: "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js"
# pin "d3", to: "https://esm.sh/d3?bundle"
# Pin vendored modules by first adding the following to app/assets/config/manifest.js:
# //= link_tree ../../../vendor/assets/javascripts .js
# pin_all_from "vendor/assets/javascripts"
end

我把我所有的javascript保存在app/assets/javascripts目录中，它仍然应该由资产管道处理。

我有以下app/assets/javascripts/importmap.json.erb

{
"imports": { 
"turbo": "<%= asset_path "turbo" %>",
<%= importmap_list_with_stimulus_from "app/assets/javascripts/controllers", "app/assets/javascripts/libraries" %>
}
}

application.js;

// This is the main application.js, there can only be one.
//
// Configure your import map in config/importmap.rb
// import "@rails/actioncable"   // Rails 7.0 required
// import "@rails/activestorage" // Rails 7.0 required
import "@hotwired/stimulus-importmap-autoloader"

在application.html.erb

中也有以下行

<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= javascript_include_tag "turbo", type: "module-shim" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= yield :head %>
<%= javascript_importmap_tags %>

manifest.js;

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

编辑

在Chrome中检查元素选项卡，我已经加载了es-module-shims，但在Firefox中我仍然得到错误;

Uncaught SyntaxError: import declarations may only appear at top level of a module
Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”.

下面是加载es-module-shim 的代码

<script src="/assets/es-module-shims-e320a414bc4656be79c9c722c91afd9bc40140edf48616fbf72fb2da3c1fdcaa.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>

编辑

下面的错误可以安全地忽略;

Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”.

裁判:https://github.com/rails/importmap-rails expected-errors-from-using-the-es-module-shim

编辑

当我将application.html.erb头更改为以下

时，另一个错误消失了

<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag    "application" %>
<%= javascript_importmap_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= yield :head %>

Answer 1

Firefox本身不支持importmaps。您需要从https://github.com/guybedford/es-module-shims添加一个多边形。