主页 / coding / 问题 / 79298467
Accepted
dthegnome
Asked: 2024-12-21 05:43:44 +0800 CST

我可以使用 importmap-rails gem 来替代 yarn 吗？或者我可以将它与 yarn 一起使用吗？

  • 772

我在管理 npm 包时遇到了麻烦importmap-rails。我理想情况下希望它能像 yarn 一样运行，它可以跟踪版本、依赖项并使用类似 的命令为您下载所有内容yarn install。

但似乎importmap-rails只有在您固定某些内容时才会使用 cdn。这是真的吗？或者它可以使用类似 yarn 的命令下载软件包及其依赖项吗？

如果做不到这一点，我可以使用importmap-railsyarn 作为包管理器吗？我尝试使用 underscore.js，但遇到了一些问题。

  1. 运行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 错误。此外，对 underscore 中的每个文件都发出了 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';

那么，我可以将 importmap-rails 与 yarn 一起使用，或者代替 yarn 使用 npm 包吗？

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

为了补充背景信息，我刚刚将我们的 rails 7 应用更新到了 rails 8，所以我们刚刚从 sprockets、yarn、webpacker 换到了带有 importmap-rails 的 propshaft。很高兴没有 webpacker，但缺少了 yarn 功能。

ruby-on-rails

2 个回答

  1. Best Answer

    您可以使用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
import debounce from "./underscore/modules/debounce.js"

    为了澄清相对部分，导入是相对于 url 的，并且您可以根据需要使用./和../匹配导入映射，前提是您有正确的 pin 设置：

    application                                          => import
application                                          => matches importmap
/assets/application-c10b436c.js                      => OK
        ⌄
      ./underscore/modules/debounce.js               => import
/assets/underscore/modules/debounce.js               => resolve relative url
/assets/underscore/modules/debounce.js               => matches importmap
/assets/underscore/modules/debounce-1fc53fe7.js      => OK
                           ⌄
                         ./restArguments.js          => import
/assets/underscore/modules/restArguments.js          => resolve relative url
/assets/underscore/modules/restArguments.js          => matches importmap
/assets/underscore/modules/restArguments-708796bd.js => OK
    • 1

  2. 如上所述，第一个建议对我来说非常有效。允许我使用 yarn 来管理依赖项，然后我可以使用 importmap-rails 链接到它们。

    使用 esm 版本可以修复在下划线 debounce.js 文件内产生 404 错误的相对路径问题。

    保留附加资产路径application.rb：

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

    使用单个pinesm js 文件而不是pin_all_from修复对所有各种下划线文件的大量获取请求：

    # config/importmap.rb
pin "underscore", to: "underscore/underscore-esm.js"

    然后我可以只导入我需要的一个函数，它就会正确地引入它的依赖项：

    // my-module.js:
import { debounce } from "underscore"

    这是我的导入图./bin/importmap json：

    {
  "imports": {
    "application": "/assets/application-bd82d6ab.js",
    "underscore": "/assets/underscore/underscore-esm-91fff580.js",
    "src/image_modal_methods": "/assets/src/image_modal_methods-5c3fcc95.js",
    "src/search": "/assets/src/search-8b38146d.js",
    "src/sortable-table": "/assets/src/sortable-table-8ef04aa1.js"
  }
}

    以下是我尝试过的一些东西的一点额外信息。首先，我使用建议的路线来实现单个功能：

    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 path
import debounce from "./underscore/modules/debounce.js"

    这导致 debounce.js 出现 404 错误：

    http://localhost:3000/assets/src/underscore/modules/debounce.js net::ERR_ABORTED 404 (Not Found)

    我怀疑这是因为它没有在 node_modules 中查找，所以我尝试了这个：

    # pin "underscore/modules/debounce"
# # debounce dependencies
# pin "underscore/modules/now"
# pin "underscore/modules/restArguments"

    这对我来说是有意义的，因为 pin 的第一个参数中的名称（据我所知）是不带扩展名的文件名，其路径相对于 app/javascript 或其他路径之一Rails.application.config.assets.paths。而且由于我已经添加node_modules到资产路径中，所以underscore/modules/name对我来说是有意义的。

    然后在我的 js 文件中导入了我的 debounce 函数及其依赖项：

    import restArguments from 'underscore/modules/restArguments'
import now from 'underscore/modules/now'
import debounce from "underscore/modules/debounce"

    我没有从导入中得到任何 404 错误，但是我仍然从 debounce.js 中的相对导入中得到 404 错误 - 我认为这是因为它是非 esm 版本。

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

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

    所以 - 我不确定是否有更好的方法，但它似乎可以很好地完成以下工作：

    • 使用 yarn 管理依赖关系
    • 将 node_modules 添加到资产路径
    • 固定依赖项的 esm 版本
    • 需要导入函数
    • 0

相关问题