Rei (Rei)

Ruby 4.0 发布 🎉

Rei — Thu, 25 Dec 2025 19:59:20 +0800

发布说明：

https://www.ruby-lang.org/en/news/2025/12/25/ruby-4-0-0-released/

另外最近官网设计更新了：

Basecamp 上线并开源看板应用 Fizzy

Rei — Wed, 03 Dec 2025 19:39:32 +0800

网站 https://www.fizzy.do/

源码 https://github.com/basecamp/fizzy

【Rei on Rails】#16 Lexxy Editor - 全新的 Rails 富文本编辑器

Rei — Fri, 28 Nov 2025 23:47:09 +0800

简介

一个 Basecamp 开发中的全新 Rails 富文本编辑器，视频展示如何替换 Action Text 的编辑器，以及如何实现 mention 功能。

视频

链接

【Rei on Rails】#15 Rails Pulse 应用性能监控

Rei — Fri, 21 Nov 2025 23:12:59 +0800

介绍 Rails Pulse 应用性能监控引擎的使用

视频

链接

项目地址：https://github.com/railspulse/rails_pulse

【Rei on Rails】#14 Administrate 搭建管理后台

Rei — Sat, 15 Nov 2025 17:48:48 +0800

thoughtbot 的后台管理库 administrate 最近发布了 1.0 版本，我试着用在了自己项目上，觉得很不错，所以录了这期视频分享：

项目地址 https://github.com/thoughtbot/administrate

Rails 8.1 发布

Rei — Wed, 22 Oct 2025 19:27:52 +0800

https://rubyonrails.org/2025/10/22/rails-8-1

要点：

Active Job 长任务中断恢复
结构化事件
本地 CI
Markdown 渲染
命令行获取密钥
关联弃用声明
Kamal 可以使用本地 docker registry

【Rei on Rails】#010 用 Dev Container 搭建开发环境

Rei — Tue, 30 Sep 2025 21:13:25 +0800

每次接手项目搭建开发环境都感到痛苦，所以录了这期视频。

B 站：https://bilibili.com/video/BV1wonmzGEc6/

YouTube：https://www.youtube.com/watch?v=dWz6JowDiAg

RubyGems 的组织管理引发争议 🍉

Rei — Sat, 20 Sep 2025 14:42:12 +0800

https://news.ycombinator.com/item?id=45299170

我用 gork 总结如下：

页面讨论总结：Ruby Central 对 RubyGems 的“攻击”

这个 Hacker News 页面（https://news.ycombinator.com/item?id=45299170）讨论了一个 Ruby 生态系统的重大争议：Ruby Central（Ruby 社区的非营利组织）突然移除 RubyGems 和 Bundler 的长期维护者，撤销他们的访问权限，并将控制权集中到全职员工手中。原帖由用户 jolux 于 22 小时前发布，链接到 Ellen Dash（网名 duckinator）撰写的 PDF 文档《Goodbye RubyGems》（https://pup-e.com/goodbye-rubygems.pdf）。该文档将此事件描述为“敌意接管”，强调了缺乏沟通和对社区信任的破坏。目前线程有 209 条评论，整体情绪偏向批评和担忧，焦点在于治理问题、社区影响以及未来方向。讨论中涌现出对 Ruby 社区“友好”文化的怀念（如“MINASWAN”原则：Matz is nice and so we are nice），并有一些辩论转向更广泛的组织政治。

主要主题概述

治理与组织变革：
- 许多评论批评 Ruby Central 的行动缺乏透明度和事先通知。Ruby Central 事后发布声明（https://rubycentral.org/news/strengthening-the-stewardship-of-rubygems-and-bundler/），称这是为了“加强管理”，但被视为公关式回应，没有道歉。
- 有人提到最近的治理提案（受 Homebrew 启发），旨在正式化决策流程，但事件发生前未完成。猜测包括安全担忧（如供应链攻击），但缺乏证据支持。
对 Ruby Central 行动的批评：
- 原作者 Ellen Dash 分享了她十年维护经历，并宣布辞职，强调社区优先而非企业控制。高度赞同的评论称此为“敌意接管”，并指出被移除的维护者多为前承包商，与 Ruby Central 的说法矛盾。
- DHH（David Heinemeier Hansson，Rails 创始人）在 X 上发帖（https://x.com/dhh/status/1969168477475786830）辩护 Ruby Central 的长期贡献，但承认事件处理不当，引发进一步辩论。
社区影响与个人经历：
- 评论者表达对维护者的同情，许多人分享 Ruby 社区的往日回忆，感慨其友好氛围的衰退。一些人担心这会影响 Ruby 的吸引力，导致开发者流失。
备选方案与未来方向：
- 建议包括社区自建替代品或分叉（如 Rails Foundation 独立注册表），但 DHH 发帖表示反对。Homebrew 维护者 Mike McQuaid 积极调解，已进行多轮通话（https://bsky.app/profile/mikemcquaid.com/post/3lz7klsyue22f），试图促成对话。

整体情绪与共识

线程情绪以负面为主，共识是 Ruby Central 需要改善沟通和包容性，但对事件根源（如安全 vs. 权力集中）存在分歧。调解努力显示出社区修复意愿，但若无实质改变，可能加剧分裂。讨论活跃，适合 Ruby 开发者关注生态动态。

Geeknote 开源

Rei — Wed, 17 Sep 2025 21:07:09 +0800

原文链接：https://geeknote.net/Rei/posts/3256

很高兴的宣布，Geeknote 已经开源，仓库位于 https://github.com/chloerei/geeknote 。

为什么开源？

开源的想法由来已久，其中一个原因是开源很酷。我管理的另一个社区 Ruby China 是开源的，Geeknote 借鉴的网站之一 dev.to 是开源的，所以我也想把 Geeknote 开源。

另一个原因是我想给 Ruby on Rails 社区提供一个新手友好的开源项目。Rails 的开源项目不少，知名的例如 Discourse、GitLab、Chatwoot 等。但这些项目由于历史积累和业务复杂度，其实不适合新手阅读。

什么是新手友好？

Geeknote 是新手友好的，有两个原因。

首先，Geeknote 的业务不复杂。作为一个博客社区，核心模型就是用户 - 文章 - 评论，理解起来比较简单。但因为 Geeknote 已经运营了四年，有一些技术债，所以也不是周末项目那么简单，对于现实项目也有参考价值。

其次，Geeknote 尽量使用 Rails 默认栈的技术。例如，使用 Hotwire 而不是前后端分离，使用 Minitest 而不是 Rspec，使用 Rails auth generator 而不是 devise。我优先选择无聊的技术，这样更容易维护，有更多时间花在产品上。

如何使用？

要启动开发环境，只需要用 vscode 打开项目目录，会自动提示启动 devcontainer 环境。

要部署到服务器，可以参考项目 Wiki。目前文档比较简陋，后面我会根据需要更新。

项目基于 MIT License 开源，你可以用于搭建自己的社区，或者 Fork 添加自己的功能。如果发现 Bug，可以打开 Issue 或者 Pull Request；如果想要贡献新功能，建议开发前先到 Discussion 发帖，Geeknote 接受新功能倾向于保守。

有其他疑问欢迎评论留言。Just for fun!

RubyConf China 2025 视频已上线

Rei — Wed, 10 Sep 2025 19:21:25 +0800

RubyConf China 2025 今年在成都举办，演讲视频如下：

BiliBili: https://space.bilibili.com/552654808/lists/6317427

YouTube: https://www.youtube.com/playlist?list=PLTUHmtFhYC6hzBV3xfRMw5sN_-Ly2YUL2

抱歉视频过了这么久才上线，原因是前期准备的时候沟通失误，片头制作的需求没给到设计师伙伴，没有预留档期制作，导致工期大大超出预期。明年我会吸取教训，在准备阶段确认素材的准备工作，并且准备替代方案。

声音经过一些降噪处理，可能不够清晰，推荐打开自动字幕观看。

Turbo Stream Broadcast - 被低估的 Rails 功能

Rei — Mon, 11 Aug 2025 17:27:09 +0800

原文链接：https://geeknote.net/Rei/posts/3253

我一直认为，把 Rails 作为前后端分离项目的后端是一种浪费。类似于在 Mac 上安装 Windows 系统，没有什么可以阻止你这样做，而且看起来很美好：Windows 系统更大众化，Mac 硬件做工好，似乎是强强联合。但是深度 Mac 用户会知道，这丢失了很多软硬件一体化设计的优势。

Rails 优势在于前后端紧密集成，有的功能只有在全栈环境下才能使用，Turbo Stream Broadcast 就是其中一个。Broadcast 在官方文档中只有一个小节的介绍，并且没有完整示例，可能很多人会忽略。我在掌握这个功能之后，发现 broadcast 对于开发实时更新的应用提供了很大便利。

最近我开发了一个 AI Chat 应用，其中核心功能是聊天部分：

这个功能是通过 broadcast 实现的。当用户发送一条消息时，服务端会保存这条消息，同时生成一个和 AI 交互的后台任务，在任务执行过程中又会创建新的消息。消息的创建和更新都通过 broadcast 更新到页面上。

关键部分的代码如下：

# app/models/message.rb
class Message < ApplicationRecord
  belongs_to :conversation

  broadcasts_to :conversation
end

<!-- app/views/rooms/show.html.erb -->
<div id="messages">
  ...
</div>

<%= turbo_stream_from @conversation %>

<!-- app/views/messages/_message.html.erb -->
<div id="<%= dom_id(message) %>">
  ...
</div>

有了这些代码，message 对象就会在创建、更新和删除的时候通过 action cable 发送消息，在页面更新内容。

其中最浓缩的代码是这一行：

broadcasts_to :conversation

初见可能比较难理解，将它展开成完整参数的形式：

broadcasts_to(
  :conversation,
  inserts_by: :append,
  updates_by: :replace,
  target: "messages",
  partial: "messages/message",
  locals: ->(message) { { message: message } }
)

这些参数的意思是：

将 message 的变动发布到关联的 conversation 频道。
渲染 message 的时候使用 messages/message 模版。
新增时插入到 #messages 元素。
更新时替换 dom_id(message) 元素。
删除时删除 dom_id(message) 元素。

Broadcast 默认提供 CRUD 的 turbo stream action，前面例子的消息内容流式更新使用了自定义的 turbo stream action。为避免文章篇幅过长不在这里展开，有兴趣的可以看项目源码：https://github.com/chloerei/llmrpg 。

broadcasts_to 就像 belongs_to，不了解细节的时候会觉得它充满魔法，了解细节之后会觉得原来如此，然后自觉使用默认配置。

对应的，前端部分需要插入 <%= turbo_stream_from @conversation %> 来订阅 @conversation 频道的消息，这样它就能在后台数据变动的时候更新页面内容。

Broadcast 功能需要视图、控制器、模型、后台任务等模块高度集成，才能实现这么精炼的代码。试想一下如果没有这个功能，自己就需要解决 websocket 服务端/客户端开发、通信协议，还有两端开发带来的沟通问题。而使用 Rails 全栈，只需要 broadcasts_to。

如果你需要为应用增加一些实时功能，推荐使用 turbo stream broadcast。你也许会对 Rails 高集成带来的开发效率有全新的认识。

LLMRPG - 用于角色扮演的大语言聊天应用

Rei — Fri, 08 Aug 2025 17:24:04 +0800

最近做了一个用于角色扮演的大语言聊天应用，想跟大家分享。

这个应用可以给 AI 设定各种角色，然后跟这些角色进行聊天。支持私聊和群聊，并且自己可以扮演其中的角色参与聊天。

示例：

为了方便体验，我部署了一个在线版本：

https://app.llmrpg.com/

注意在线版本的数据不加密，我可能会观察使用情况来改进应用。

如果你注重隐私，这个项目已经开源，可以尝试自己部署：

https://github.com/chloerei/llmrpg

使用方法

注册账号。
到“角色”创建角色定义并上传头像。
到“房间”创建聊天室并添加参与角色。
在角色列表下拉框选择自己要扮演的角色（可选）。
开始聊天。

为什么开发这个项目

这个项目源自我学习 LLM 应用开发过程的一个脚本，在调用 API 的时候，我尝试给 AI 加上各种角色设定，输出就变得有趣起来。以往编写的程序都会产出固定输出，例如下单就会产生订单，发帖就会产生帖子。但是与 AI 聊天，不能预知它会产生什么结果，有时会有种创造生命的错觉。

由于脚本还是比较单调，我想如果加上图形界面，给角色加上头像，就可以提供更高的沉浸感。于是就可以做成了基于 Web 的聊天应用。

这个项目主要提供的是情绪价值。例如可以调戏动漫人物、向历史伟人请教问题，或者是做一个虚拟的自己，问自己的初心是什么。这一切都取决于自己的想象力。

⚠️提醒：AI 的对话是虚幻的，不要和现实混淆。

未来

当前版本功能还很简陋，我想尽快发布出来收集反馈。

有一些功能已在计划中，例如支持更多的 AI 后端和模型切换（目前只支持 DeepSeek）。

有更多意见建议，欢迎到项目的讨论区留言：https://github.com/chloerei/llmrpg/discussions

用 HTTP + JSON 直接访问 GraphQL API

Rei — Wed, 26 Feb 2025 10:43:19 +0800

原文链接：https://geeknote.net/Rei/posts/3191

有一天我需要访问 Fly 的 API 以支持自动签发 SSL 证书，Fly API 基于 GraphQL。我一向不太喜欢 GraphQL，精神洁癖让我不想增加一个 GraphQL Client 依赖。我想到 GraphQL 底层基于 HTTP 和 JSON，为何不直接访问接口？以下就是用 Ruby 实现过程。

Fly 前开发者认为“GraphQL 拖慢了所有人、所有事物的速度。” —— https://fly.io/blog/the-exit-interview-jp/

首先 Graph QL API 需要提供一个 endpoint，对于 Fly API 来说是 https://api.fly.io/graphql：

ENDPOINT = "https://api.fly.io/graphql"

可以直接对 endpoint 发起 HTTP POST 请求，但会因为缺失验证信息返回错误：

uri = URI(@endpoint)
data = {}.to_json
headers = {
  "Content-Type" => "application/json"
}
response = Net::HTTP.post(uri, data, headers)
# => 验证错误

要增加验证信息需要传递一个 auth token，token 可以在 fly 的控制台获取：

uri = URI(@endpoint)
data = {}.to_json
headers = {
  "Content-Type" => "application/json",
  "Authorization" => "Bearer #{ENV[FLY_API_TOKEN]}"
}
response = Net::HTTP.post(uri, data, headers)
# => Query 错误

接下来要传递查询内容。GraphQL 查询的 JSON 格式为：

{
  query: "QUERY STRING...",
  variables: {
    var1: "value1"
  }
}

可以看到，query 是支持变量的，但是需要通过 variables 字段传递。例如 Fly 的查询证书接口的查询字符串为：

query($appName: String!) {
  app(name: $appName) {
    certificates {
      nodes {
        createdAt
        hostname
        clientStatus
      }
    }
  }
}

其中 $appName 是变量，那么查询的代码可以写作：

uri = URI(@endpoint)
data = {
  query: <<~EOF
    query($appName: String!) {
      app(name: $appName) {
        certificates {
          nodes {
            createdAt
            hostname
            clientStatus
          }
        }
      }
    }
  EOF
  ,
  variables: {
    appName: "my-app-name"
  }
}.to_json
headers = {
  "Content-Type" => "application/json",
  "Authorization" => "Bearer #{ENV[FLY_API_TOKEN]}"
}
response = Net::HTTP.post(uri, data, headers)
#=> json data...

返回的裸 JSON 内容是：

{
  "data": {
    "app": {
      "certificates": {
        "nodes": [
          {
            "createdAt": "2020-03-04T14:17:14Z",
            "hostname": "example.com",
            "clientStatus": "Ready"
          },
          {
            "createdAt": "2020-03-05T15:28:41Z",
            "hostname": "exemplum.com",
            "clientStatus": "Ready"
          }
        ]
      }
    }
  }
}

要注意的是，返回的 json data 放在 data 字段内，需要增加一层解析：

JSON.parse(response.body)["data"]

现在把上面的代码整理一下，放进一个类里：

# client = Graphql::Client.new("http://localhost:3000/graphql", { "Authorization" => "Bearer token..." })
# response = client.execute("query { ... }", { name: "value" })
class Graphql::Client
  def initialize(endpoint, headers = {})
    @endpoint = endpoint
    @headers = headers
  end

  def execute(query, variables = {})
    data = {
      query: query,
      variables: variables
    }.to_json

    headers = {
      "Content-Type" => "application/json"
    }.merge(@headers)

    uri = URI(@endpoint)

    response = Net::HTTP.post(uri, data, headers)

    JSON.parse(response.body)["data"]
  end
end

为了方便调用，我还封装了一个 Fly::Client 类：

class Fly::Client
  GraphqlClient = Graphql::Client.new(
    "https://api.fly.io/graphql",
    { "Authorization" => "Bearer #{ENV["FLY_API_TOKEN"]}" }
  )

  def self.get_certs
    query = <<~GRAPHQL
      query($appName: String!) {
        app(name: $appName) {
          certificates {
            nodes {
              createdAt
              hostname
              clientStatus
            }
          }
        }
      }
    GRAPHQL

    variables = {
      appName: ENV["FLY_APP_NAME"]
    }

    GraphqlClient.execute(query, variables)
  end

  # ...
end

通过这个类可以方便的调用 Fly API：

Fly::Client.get_certs
# => json data ...

以上就是用 HTTP + JSON 直接访问 GraphQL API 的方法。

RubyConf China 2024 视频已上线

Rei — Sat, 11 Jan 2025 20:47:58 +0800

抱歉今年视频上得晚了。

以下是播放列表：

BiliBili: https://space.bilibili.com/552654808/lists/4537933

YouTube: https://www.youtube.com/playlist?list=PLTUHmtFhYC6jKjjVPcYIXaiyCdmkKE-oW

Rails 8: The Demo

Rei — Fri, 15 Nov 2024 13:50:26 +0800

原先的 15 分钟 demo 增加到了 30 分钟，内容也多了很多：Trix，Importmap，Kamal，Auth generator，PWA。

Rails 开发者应该拥抱 Web Component

Rei — Thu, 17 Oct 2024 22:51:10 +0800

原文地址： https://geeknote.net/Rei/posts/3084

原文有两个视频演示，查看原文会获得更好体验。

Rails 8 将会继续将 Hotwire 作为默认，我觉得这很好。Hotwire 是以服务端渲染为核心的前端方案，由于服务端是数据的根源，大部分应用可以通过服务端渲染解决问题而不用考虑数据同步。

不过能做不表示最优，还是有一些问题需要在客户端处理，这通常是涉及客户端状态和前端渲染。举个例子，多选输入框。当前 Geeknote 的标签输入使用了 hotwire_combobox 这个库，它充分利用了 hotwire 服务端渲染的特性，用一种聪明的方式实现了多选输入框。但如果网络状况不好，会发现输入会有较大延迟：

我没有人为降低网络延迟，从国内访问境外网站就是这个状态。

这里的问题在于在将输入转为 chip 的时候，hotwire_combobox 使用了服务端渲染，而这实际可以在客户端完成，因为展示补全列表的时候已经获得渲染所需要的数据了。当然 hotwire_combobox 可能以后会改为客户端渲染，这时候会发现需要处理两个问题：客户端状态和渲染。由于 hotwire 并不包含客户端渲染的功能，如果纯用 JavaScript 处理会非常痛苦。考虑一下如何管理可选项、已输入、当前选择，并且反应到 UI 上？

这时候就要考虑前端方案了。

前端组件

在过去十年的前端框架混战中，“组件”概念取得了共识。所谓组件，是指一块包含了样式、状态和功能的前端模块。组件可以包含更多组件，组件间也可以通信。以组件的方式管理前端代码是当今前端框架的主流。

所以在选择前端方案时，我会更多考虑基于组件的前端方案。

可选的方案

View Component

如果搜索 Rails Component 你会发现 ViewComponent 这个 gem。它本质上是对象化的服务端局部模版，提供了更好的测试接口，但不解决客户端状态和渲染。

React/Vue 等

React/Vue 和其他流行的前端框架，可以很方便的构建前端组件。它们通常提供了响应式属性、声明式模版，可以很好处理客户端状态和渲染。并且这些框架的社区庞大，有大量现成的 UI 库和组件库。

但目前主流的前端框架有一个问题，互操作性不好。React 的组件需要用在 React 项目，Vue 的组件需要用在 Vue 项目。当然，也可以通过增加适配器让不同框架的组件互操作，但很少有人这么做。通常选择了一个框架后，整个应用就都会选择基于这个框架的组件。

也由于这个问题，在 Rails View 中使用 React/Vue 也显得格格不入，需要到处写初始化代码。根据我的经验，在 Rails View 中引入了 React/Vue 之后最终都会走向前后端分离，因为这些组件和 Rails View 无法交互，与其耦合在一起不如彻底分离。

有的人可能觉得这样很好，但我希望前端组件用于增强而不是替换 Rails View，因为 Rails View 擅长于服务端渲染的部分。

Web Component

最终我把目光放在 Web Component，一个浏览器的标准 API。Web Component 允许开发者创建自定义元素，并且像浏览器内置元素一样使用它。

举个例子，可以这样使用自定义元素：

<form action="/posts" method="post">
  <my-combobox name="tabs" value="Ruby,JavaScript" suggeust-url="/tags/suggests"></my-combobox>
</form>

<my-combobox> 是一个自定义元素，它用起来像浏览器内置元素，也会随着表单提交而提交。

我还没有实现 <my-combobox>，也许会在将来实现。

对于 Rails 项目来说更好的是，可以在 Turbo Stream/Broadcast 环境中使用自定义元素，而不需要额外的初始化代码。

直接用浏览器 API 也可以创建自定义元素，但我建议先从 Lit 库开始。

Lit 简介

Lit 是一个开发 Web Component 的库，主要开发人员来自 Google。根据官网的介绍，Lit 的开发团队参与了 Web Component 标准的定制。

Lit 相比浏览器原生接口提供了更多方便开发者的功能，例如：

样式作用域。
反应式属性。
声明式模版。

以下是 Lit 实现一个计数器组件的例子：

import { LitElement, html, css } from 'lit';

class MyCounter extends LitElement {
  static styles = css`
    label {
      color: green;
    }
  `

  static properties = {
    count: { type: Number }
  }

  constructor() {
    super()
    this.count = 0
  }

  increment() {
    this.count += 1
  }

  render() {
    return html`
        <label>${this.count}</label>
        <button @click="${this.increment}">Increment</button>
    `;
  }
}

customElements.define('my-counter', MyCounter);

要注意的是：

组件内的 Style 只对组件内部元素有效，所以 class name 可以写得很简洁。
通过 ${} 插值，通过 @event 绑定事件。
当 count 属性发生变化时，只会更新需要变更的部分。

这些特性能大大简化前端组件的开发。

实践

最近我开发了项目 Geekslide，Lit 用于 UI 组件和幻灯片编辑/播放。

如果没有 Lit，这样的交互纯手工写会非常麻烦。由于 Web Component 出色的互操作性，我可以只在需要的部分使用 Lit 而不用整个替换 Rails View。

我打算在未来更新更多 Lit 实践方面的内容。

资源

最后推荐一些资源。

学习 Lit 最好的去处就是官方文档：https://lit.dev/docs/

Adobe 的 UI 库有 Web Component 版本：https://opensource.adobe.com/spectrum-web-components/

FontAwsome 团队正在开发一个基于 Web Component 的 UI 库：https://backers.webawesome.com/

总结

如果你需要开发高交互的应用，又不想放弃 Rails View 默认栈，不妨试一下 Web Component / Lit。

Importmap 还是 jsbundling？我全都要

Rei — Sat, 12 Oct 2024 22:15:27 +0800

原文地址： https://geeknote.net/Rei/posts/3049

从 Rails 7 开始，Importmap 成为处理 JavaScript 加载的默认机制。它可以充分利用 HTTP/2 的并行下载和缓存机制，避免打一个大包每次改动都需要下载所有代码。

对于 js 依赖，Importmap 提供了一个 pin 功能，例如运行：

./bin/importmap pin local-time

Importmap 就会从 CDN 下载 local-time 的 js 文件放到 vendor/javascript 目录，自动添加 config/importmap.rb 配置，随后就可以在 js 文件里面导入：

import LocalTime from "local-time"
LocalTime.start()

但某些 js 库预设开发者会使用打包工具，没有将源码打包成一个完整的包，而是拆分了很多文件，这时候用 importmap pin 就会遇到问题。例如 Lit，如果执行：

bin/importmap pin lit

会看到输出：

Pinning "lit" to vendor/javascript/lit.js via download from https://ga.jspm.io/npm:lit@3.2.0/index.js
Pinning "@lit/reactive-element" to vendor/javascript/@lit/reactive-element.js via download from https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/reactive-element.js
Pinning "lit-element/lit-element.js" to vendor/javascript/lit-element/lit-element.js.js via download from https://ga.jspm.io/npm:lit-element@4.1.0/lit-element.js
Pinning "lit-html" to vendor/javascript/lit-html.js via download from https://ga.jspm.io/npm:lit-html@3.2.0/lit-html.js
Pinning "lit-html/is-server.js" to vendor/javascript/lit-html/is-server.js.js via download from https://ga.jspm.io/npm:lit-html@3.2.0/is-server.js

可以看到 Lit 引用了很多子包。糟糕的是，即使下载了这么多包，导入还是不完整的，如果在 js 代码中 `import { LitElement } from "lit"，会在浏览器中报错：

GET http://localhost:3000/assets/css-tag.js net::ERR_ABORTED 404 (Not Found)

这是因为 @lit/reactive-element 这个包中有很多可选模块没有下载下来。但如果下载所有可选模块，那么 importmap 配置会膨胀得很厉害。有一个 PR 正在处理（#235），不好说能不能解决，因为问题在于库作者没有考虑不打包导入的需求。

那么不妨改变一下思路，先用 jsbunding 将依赖打包，然后再用 importmap 导入。以下展示如何实现。

实现

假设已经使用 Rails 创建了项目，并且默认使用了 importmap：

rails new myapp

代码在 Rails 8.0.0.beta1 测试，但应该可用于 Rails 7+。

接下来安装 jsbundling：

./bin/bundle add jsbundling-rails
./bin/rails javascript:install:esbuild

这时你会看到 js 编译错误，因为 jsbundling 和 importmap 的默认配置有冲突，接下来会修复冲突。

删除 app/views/layouts/application.html.erb 内这行内容：

<%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>

修改 package.json，将内容改为：

"scripts": {
  "build": "esbuild app/assets/javascripts/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets"
}

注意路径改为 app/assets/javascripts/*.*，这是以后放置需要 esbuild 编译的 js 文件的目录。

在 config/applicatoin.rb 里面添加内容：

config.assets.excluded_paths << Rails.root.join("app/assets/javascripts")

创建文件夹 app/javascript/src/，添加文件 app/assets/javascripts/lit.js，内容为：

export * from 'lit';

通过 yarn 安装 lit 包：

yarn add lit

在 config/importmap.rb 内添加配置：

pin "lit", to: "lit.js"

现在启动开发进程 ./bin/dev ，你会看到 esbuild 将 lit 编译到 app/assets/builds/lit.js。打开浏览器查看页面源码，importmap 的内容增加了：

"imports": {
  ...
  "lit": "/assets/lit-9c62c803.js",
  ...
}

整个工作流程是：esbuild 将 app/assets/javascripts 的源码编译到 app/assets/build，app/assets/build 的内容会被 assets pipeline 处理，在 config/importmap.rb 中添加导入名和文件名的映射，模块就可以被应用的 js 代码导入。

现在，你可以在 js 中 import { LitElement } from "lit"。