Posso usar a gem importmap-rails para substituir o yarn ou posso usá-la com o yarn?

Você pode usar yarnpara obter os pacotes, mas precisa usar o pacote do módulo ES:

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

import { debounce } from "underscore"

Se você precisa de apenas uma função:

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"

o que permitirá importações relativas:

// app/javascript/application.js

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

Para esclarecer a parte relativa, as importações são relativas à URL, e você pode usar ./e ../conforme necessário para corresponder ao importmap, desde que tenha a configuração de pin correta:

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

Como dito acima, a primeira sugestão funcionou perfeitamente para mim. Permite que eu use o yarn para gerenciar dependências e então posso vinculá-las com importmap-rails.

Usar a versão esm foi o que foi necessário para corrigir o problema do caminho relativo que estava gerando erros 404 no arquivo underscore debounce.js.

Manteve o caminho do ativo adicional em application.rb:

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

Usando o único pinpara o arquivo esm js em vez de pin_all_fromcorrigir a montanha de solicitações GET para todos os vários arquivos sublinhados:

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

Então eu pude importar apenas a função que eu precisava, e ela puxou corretamente suas dependências:

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

Aqui está meu importmap de ./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"
  }
}

E só uma pequena informação extra para coisas que tentei no caminho. Primeiro usei a rota sugerida para uma única função:

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"

Isso me deu um erro 404 para debounce.js:

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

Suspeitei que isso acontecia porque ele não estava procurando em node_modules, então tentei isto:

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

O que fez sentido para mim porque o nome no primeiro argumento para pin (até onde eu entendo) é o nome do arquivo sem a extensão, com um caminho relativo a app/javascript ou um dos outros caminhos em Rails.application.config.assets.paths. E como eu tinha adicionado node_modulesaos caminhos de ativos, então underscore/modules/namefez sentido para mim.

Então, no meu arquivo js, ​​importei minha função debounce e suas dependências:

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

Não obtive nenhum erro 404 nas importações, mas ainda obtive erros 404 nas importações relativas dentro do debounce.js. Presumo que isso ocorreu porque ainda era a versão não-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)

Então, não tenho certeza se há uma maneira melhor, mas parece funcionar bem para fazer o seguinte:

• Gerenciar dependências com yarn
• Adicionar node_modules aos caminhos de ativos
• pin esm versões de dependências
• funções de importação necessárias