我可以使用 importmap-rails gem 来替换纱线还是可以将它与纱线一起使用？

Question

我在使用

importmap-rails

管理 npm 包时遇到问题。理想情况下，我希望它像yarn一样运行，它可以跟踪版本、依赖关系，并使用像

yarn install

这样的命令为您下载所有内容。

但似乎

importmap-rails

仅设置为在您固定某些内容时使用cdn。这是真的吗？或者它可以使用像yarn这样的命令下载包及其依赖项吗？

如果不能做到这一点，我可以使用

importmap-rails

和yarn作为我的包管理器吗？我用 underscore.js 尝试过，但遇到了一些问题。

1. Ran

   yarn add underscore

   ，看到它已正确下载，然后将

   node_modules

   添加到资源路径中，以便

   propshaft

   和

   importmap-rails

   知道要查看那里：

config/application.rb
config.assets.paths << Rails.root.join('node_modules')

然后固定下划线文件夹：

# config/importmap.rb
pin_all_from 'node_modules/underscore', under: 'underscore'

然后导入我需要的功能：

// from a custom js file
import debounce from 'underscore/modules/debounce';

运行

./bin/importmap json

显示找到debounce.js文件：

{
  "imports": {
    "application": "/assets/application-bd82d6ab.js",
    "underscore/amd/_baseCreate": "/assets/underscore/amd/_baseCreate-7eccab16.js",
    "underscore/amd/_baseIteratee": "/assets/underscore/amd/_baseIteratee-5f781255.js",
    "underscore/amd/_cb": "/assets/underscore/amd/_cb-dd403ec6.js",
    "underscore/amd/_chainResult": "/assets/underscore/amd/_chainResult-4b98e265.js",
    "underscore/amd/_collectNonEnumProps": "/assets/underscore/amd/_collectNonEnumProps-ed4c206f.
...
    "underscore/modules/debounce": "/assets/underscore/modules/debounce-decaec4e.js",

在浏览器中，我没有收到 debounce.js 的任何错误，它被指纹识别并找到，但在该文件内部，它使用相对路径导入其他函数，从而导致 404 错误。还有一个 get 请求发送到下划线中的每个文件，这也不好。

15:41:34 web.1  | Completed 200 OK in 5482ms (Views: 2431.0ms | ActiveRecord: 557.1ms (24 queries, 6 cached) | GC: 368.1ms)
15:41:34 web.1  | 
15:41:34 web.1  | 
15:41:34 web.1  | Started GET "/assets/underscore/amd/_baseCreate-7eccab16.js" for ::1 at 2024-12-20 15:41:34 -0500
15:41:35 web.1  | Started GET "/assets/underscore/amd/_baseIteratee-5f781255.js" for ::1 at 2024-12-20 15:41:35 -0500
15:41:35 web.1  | Started GET "/assets/underscore/amd/_cb-dd403ec6.js" for ::1 at 2024-12-20 15:41:35 -0500
15:41:35 web.1  | Started GET "/assets/underscore/amd/_chainResult-4b98e265.js" for ::1 at 2024-12-20 15:41:35 -0500
15:41:35 web.1  | Started GET "/assets/underscore/amd/_collectNonEnumProps-ed4c206f.js" for ::1 at 2024-12-20 15:41:35 -0500
15:41:35 web.1  | Started GET "/assets/underscore/amd/_createAssigner-aa588b74.js" for ::1 at 2024-12-20 15:41:35 -0500
15:41:36 web.1  | Started GET "/assets/underscore/amd/_createEscaper-3ea6026c.js" for ::1 at 2024-12-20 15:41:36 -0500
15:41:36 web.1  | Started GET "/assets/underscore/amd/_createPredicateIndexFinder-f577fa32.js" for ::1 at 2024-12-20 15:41:36 -0500
...

debounce-decaec4e.js:1 
GET http://localhost:3000/assets/underscore/modules/restArguments.js 404 (Not Found)

debounce-decaec4e.js:2 
GET http://localhost:3000/assets/underscore/modules/now.js net::ERR_ABORTED 404 (Not Found)

debounce-decaec4e.js
import restArguments from './restArguments.js';
import now from './now.js';

那么，对于 npm 包，我可以将 importmap-rails 与yarn一起使用，还是代替yarn？

我用谷歌搜索并梳理了文档，只有这个简短的描述： https://github.com/rails/importmap-rails/blob/main/README.md#using-npm-packages-via-javascript-cdns

对于额外的上下文，我刚刚将 Rails 7 应用程序更新到 Rails 8，因此我们只是使用 importmap-rails 从 sprockets、yarn、webpacker 到 propshaft。很高兴没有 webpacker，但缺少纱线功能。

Answer 1

你可以使用

yarn

来获取包，但你必须使用ES模块包：

pin "underscore", to: "underscore/underscore-esm.js"

import { debounce } from "underscore"

---

如果您只需要一项功能：

pin "/assets/underscore/modules/debounce.js", to: "underscore/modules/debounce.js"
# debounce dependencies
pin "/assets/underscore/modules/now.js", to: "underscore/modules/now.js"
pin "/assets/underscore/modules/restArguments.js", to: "underscore/modules/restArguments.js"

这将允许相对导入：

// app/javascript/application.js

// relative to the asset url, not the filesystem
import debounce from "./underscore/modules/debounce.js"