如何在 Rails 7 引擎中设置 importmap-rails？

我在 importmap-rails gem github 存储库中提出了一个问题here关于这一点，但我想我会在这里提出这个问题，以防有人有解决方法

这是我迄今为止发现的

使用 Rails 7 alpha 2 或 Rails 7.0 生成的新引擎rails plugin new custom_page --mountable --full生成一个新引擎，其中包含捆绑的 gem 中的 importmap-rails gem，但无法使用它。添加spec.add_dependency 'importmap-rails'到 enginename.gemspec 没有区别，添加require importmap-rails到engine.rb。 bin 目录中没有 importmap 可执行文件。 致电bundle info importmap-rails产生一个有希望的结果，表明默认情况下安装了 gem

* 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 --tasks shows

rails app:importmap:install # Setup Importmap for the app

但我相信这是来自 --full 选项生成的测试应用程序，而不是可供引擎的 Rails 命令使用。 我期望在没有 app: 前缀的情况下看到相同的结果 对此任务的调用将解决模板错误，如图所示

rails app:importmap:install

不知道如何构建任务“app:template”（请参阅​​可用列表 任务与rails --tasks） 你的意思？应用程序：tmp：创建

如果有解决此问题的解决方案，我将很高兴听到它，并且我相信其他人也会这样做。我想要这个的原因是我完全未能在 Rails 6.1.4 引擎中引入 webpacker，我希望这将是我的、改进的解决方案

更新响应亚历克斯

Running bin/importmap json在引擎目录中导致

importmap-rails-1.2.1/lib/importmap/commands.rb:63:injson': undefined method join' for nil:NilClass (NoMethodError)

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解决了拼图的最后一块

您不需要使用安装任务来设置导入映射。它所做的只是一些复制粘贴操作，无论如何它对引擎设置并没有真正的帮助。

将 importmaps 添加到引擎的 gemspec 文件中：

# my_engine/my_engine.gemspec

spec.add_dependency "importmap-rails"

Update 引擎.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>

Create 导入映射.rb和别针my_engine/application，这个名字必须匹配javascript_import_module_tag。它不能与主应用程序中的任何其他名称冲突，因此您不能只使用application:

# 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/importmap可以定制以在引擎内部工作。创建一个新的importmap里面的文件bin目录。

# 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"

我还没有对其进行太多测试，因此欢迎任何反馈。如果某些内容没有出现，请重新启动服务器，我不知道重新加载的行为如何。