原文地址： 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:[email protected]/index.js
Pinning "@lit/reactive-element" to vendor/javascript/@lit/reactive-element.js via download from https://ga.jspm.io/npm:@lit/[email protected]/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:[email protected]/lit-element.js
Pinning "lit-html" to vendor/javascript/lit-html.js via download from https://ga.jspm.io/npm:[email protected]/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:[email protected]/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"。

总结

本文使用 esbuild 和 importmap 结合的方式，解决 impotmap 无法处理复杂依赖的问题。虽然这破坏了 nobuild 的期望，还是能利用到细粒度缓存的优点。在 importmap 普遍被 js 包兼容前，不妨用这个方法处理复杂依赖。