我在 importmap-rails gem github 存储库here中提出了一个关于此问题的问题，但我想我应该在这里提出这个问题，以防有人有解决方法
这是我迄今为止发现的
使用 Rails 7 alpha 2 或 Rails 7.0 生成的新引擎
rails plugin new custom_page --mountable --fullspec.add_dependency 'importmap-rails'require importmap-railsbundle info importmap-rails* importmap-rails (0.8.1)
Summary: Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
Homepage: https://github.com/rails/importmap-rails
Source Code: https://github.com/rails/importmap-rails
Path: /home/jamie/.rvm/gems/ruby-3.0.0@custom_page/gems/importmap-rails-0.8.1
拨打
rails --tasksrails app:importmap:install # Setup Importmap for the app
但我相信这是来自 --full 选项生成的测试应用程序，而不是可供引擎的 Rails 命令使用。 我期望在没有 app: 前缀的情况下看到相同的结果 对此任务的调用会解决模板错误，如图所示
rails app:importmap:install
不知道如何构建任务“app:template”（请参阅可用列表 任务与
) 您是说吗？应用程序：tmp：创建rails --tasks
如果有解决此问题的解决方案，我将很高兴听到它，并且我相信其他人也会这么做。我想要这个的原因是我完全未能在 Rails 6.1.4 引擎中引入 webpacker，我希望这将是我的、经过改进的解决方案
更新回复Alex
在引擎目录中运行
bin/importmap jsonimportmap-rails-1.2.1/lib/importmap/commands.rb:63:in
json': undefined method require Rails.root.join("config/environment")
^^^^^
from /home/jamie/.rvm/gems/ruby-3.2.2@custom_page/gems/thor-1.2.2/lib/thor/command.rb:27:in `run'
from /home/jamie/.rvm/gems/ruby-3.2.2@custom_page/gems/thor-1.2.2/lib/thor/invocation.rb:127:in `invoke_command'
from /home/jamie/.rvm/gems/ruby-3.2.2@custom_page/gems/thor-1.2.2/lib/thor.rb:392:in `dispatch'
from /home/jamie/.rvm/gems/ruby-3.2.2@custom_page/gems/thor-1.2.2/lib/thor/base.rb:485:in `start'
from /home/jamie/.rvm/gems/ruby-3.2.2@custom_page/gems/importmap-rails-1.2.1/lib/importmap/commands.rb:147:in `<top (required)>'
from <internal:/home/jamie/.rvm/rubies/ruby-3.2.2/lib/ruby/3.2.0/rubygems/core_ext/kernel_require.rb>:37:in `require'
from <internal:/home/jamie/.rvm/rubies/ruby-3.2.2/lib/ruby/3.2.0/rubygems/core_ext/kernel_require.rb>:37:in `require'
from bin/importmap:24:in `<main>'
此引擎功能尚未在应用程序中
我的日志中没有 importmap 错误消息，搜索了“Importmap 跳过了丢失的路径”和“跳过”和“importmap”，最后一个确实抛出了早期错误的错误，但自从该错误得到解决以来没有任何错误
我有一个标准的资产设置，我确实有一个更新 css 文件的功能，这可能就是您所想到的。
我没有编译资源，所有文件都以单数形式命名为 import 和 import.rb
我的application.js中的代码如下
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
我的清单
//= link_directory ../stylesheets/ccs_cms/custom_page .css
//= link_tree ../javascripts/ccs_cms/custom_page .js
//= link_tree ../javascripts/new_ckeditor
//= link ccs_cms/custom_page/jqtree.css
//= link ccs_cms/custom_page/public.css
我的 application.js 看起来像
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
//= require ccs_cms/custom_page/jquery-3.6.0.min
//= require ccs_cms/custom_page/jquery-ui.min
//= require ccs_cms/custom_page/tree.jquery
//= require ccs_cms/custom_page/sortable
//= require ccs_cms/custom_page/nested_fields/addFields
//= require_tree .
//require("./nested-forms/addFields");
//require("./nested-forms/removeFields");
// do some javascript
document.querySelector("h1").innerText = "Hi!, i'm your engine";
console.log("hi, again");
importmap.rb 包含以下内容
# my_engine/config/importmap.rb
# NOTE: this pin works because `my_engine/app/assets/javascripts
# is in the `Rails.application.config.assets.paths`
pin "ccs_cms/custom_page/application"
头部生成了以下内容
<script type="importmap" data-turbo-track="reload">{
"imports": {
}
}</script>
随着
<script type="module">import "application"</script>
<script type="module">import "ccs_cms/custom_page/application"</script>
进一步更新：我确实在控制台中看到了 hi Again 消息，因此
console.log("hi, again");document.querySelector("h1").innerText = "Hi!, i'm your engine";最后补充一下
initializer :append_importmap_paths do |app|
app.config.importmap.paths << root.join("config/importmap.rb")
end
engine.rb 解决了拼图的最后一块
您不需要使用安装任务来设置导入映射。它所做的只是一些复制粘贴操作，无论如何它对引擎设置并没有真正的帮助。
将导入映射添加到引擎的 gemspec 文件中：
# my_engine/my_engine.gemspec
spec.add_dependency "importmap-rails"
更新engine.rb：
# my_engine/lib/my_engine/engine.rb
require "importmap-rails"
module MyEngine
class Engine < ::Rails::Engine
isolate_namespace MyEngine
initializer "my-engine.importmap", before: "importmap" do |app|
# NOTE: this will add pins from this engine to the main app
# https://github.com/rails/importmap-rails#composing-import-maps
app.config.importmap.paths << root.join("config/importmap.rb")
# NOTE: something about cache; I did not look into it.
# https://github.com/rails/importmap-rails#sweeping-the-cache-in-development-and-test
app.config.importmap.cache_sweepers << root.join("app/assets/javascripts")
end
# NOTE: add engine manifest to precompile assets in production
initializer "my-engine.assets" do |app|
app.config.assets.precompile += %w[my_engine_manifest]
end
end
end
更新资产清单：
# my_engine/app/assets/config/my_engine_manifest.js
//= link_tree ../javascripts/my_engine .js
如果需要，为我们的引擎添加 javascript 入口点。无需此文件即可使用 Pin 图。
# my_engine/app/assets/javascripts/my_engine/application.js
// do some javascript
document.querySelector("h1").innerText = "hi, i'm your engine";
console.log("hi, again");
更新引擎的布局：
# my_engine/app/views/layouts/my_engine/application.html.erb
<!DOCTYPE html>
<html>
<head>
<!--
NOTE: This loads/imports main app `application.js` and all the pins from
the main app and from the engine (because we set it up in the engine.rb).
-->
<%= javascript_importmap_tags %>
<!--
NOTE: To add engine's javascript functionality we have to load the
entrypoint here or `import` it in the main app `application.js`
-->
<%= javascript_import_module_tag "my_engine/application" %>
</head>
<body> <%= yield %> </body>
</html>
创建importmap.rb并固定
my_engine/applicationjavascript_import_module_tagapplication# my_engine/config/importmap.rb
# NOTE: this pin works because `my_engine/app/assets/javascripts
# is in the `Rails.application.config.assets.paths`
pin "my_engine/application"
测试设置的一些额外功能：
# config/routes.rb
Rails.application.routes.draw do
mount MyEngine::Engine => "/"
end
# my_engine/config/routes.rb
MyEngine::Engine.routes.draw do
get "home", to: "homes#index"
end
# my_engine/app/controllers/my_engine/homes_controller.rb
module MyEngine
class HomesController < ApplicationController
def index; end
end
end
# my_engine/app/views/my_engine/homes/index.html.erb
<h1>Home</h1>
此时，您应该在渲染布局的
<head><script type="importmap" data-turbo-track="reload">{
"imports": {
"application": "/assets/application-66ce7505c61e3e4910ff16e7c220e1fbfb39251cd82e4bab8d325b3aae987cf9.js",
"my_engine/application": "/assets/my_engine/application-31ce493e8376b4c20703a50f38d419ae309ffe410b7ab7fec47440e02eef08a8.js",
}
}</script>
<script type="module">import "application"</script>
<script type="module">import "my_engine/application"</script>
H1<h1>hi, i'm your engine</h1>可以使用 https://generator.jspm.io/手动添加其他导入映射。
为了获得奖励积分，可以自定义
bin/importmapbin目录中创建一个新的
importmap 文件。
# my_engine/bin/importmap
#!/usr/bin/env ruby
# NOTE: don't forget to `chmod u+x bin/importmap` to make it executable.
# make sure we are loading the correct versions of things
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__)
require "bundler/setup" if File.exist?(ENV["BUNDLE_GEMFILE"])
# NOTE: importmap requires some rails goodness that we don't have in the engine,
# because we don't have `config/application.rb` that loads the environment.
require "rails"
# importmap-rails is not loaded automatically
require "importmap-rails"
# the actual command runner
require "importmap/commands"
从引擎目录中运行：
$ bin/importmap pin react
Pinning "react" to https://ga.jspm.io/npm:[email protected]/index.js
$ cat config/importmap.rb
pin "my_engine/application"
pin "react", to: "https://ga.jspm.io/npm:[email protected]/index.js"
我还没有对其进行太多测试，因此欢迎任何反馈。如果某些内容没有出现，请重新启动服务器，我不知道如何重新加载这一切。
我又回到了旧式的 Javascript 包含在 html 中的方式。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
它肯定适用于所有浏览器，而不是弄清楚浏览器是否支持我稍后可能使用的功能。
我也可以完全控制要放置的页面...但这可能不是您想要的...