ruby-on-rails Javscript使用importmaps无法在assets下查找模块

qkf9rpyu 于 12个月前发布在 Ruby

关注(0)|答案(2)|浏览(162)

我正在尝试将我的rails 7应用程序转换为使用import map，因为我在使用turbo和hotwire时遇到了问题。我没有使用bootstrap或tailwind。我们使用的是materialize。
我试图导入添加自定义文件使用Rails 7导入Map。
我的控制台出现错误：

Uncaught TypeError: Failed to resolve module specifier "src".
Relative references must start with either "/", "./", or "../".

字符串
我的树是：

app
  javascript
      src
        custom.js
vendor
  javascript
    vendor_src
       .....

型
我的importmap.rb包含：

....
pin_all_from "app/javascript/src", under: "src"
pin_all_from "vendor/javascript/vendor_src", under: "vendor_src"

型
我的application.js包含：

import "src"
import "vendor_src"`

型
我的manifest文件是：

//= link_tree ../images
//= link_tree ../../javascript
//= link_tree ../../../vendor/javascript
//= link_tree ../stylesheets

型
当我将application.js文件更改为：

import "./src"
import "../../javascript/vendor_src"

型
（文档中说在生产中无法工作）我现在得到了错误：

GET http://localhost:3000/vendor/javascript/vendor_src net::ERR_ABORTED 404 (Not Found)
application-1f36702eea04104593de68f423311c35ee03c50e8e8222ab5412a8a3674b03ef.js:2 

GET http://localhost:3000/assets/src net::ERR_ABORTED 404 (Not Found)

型
我运行了bin/importmap json。这是我得到的：

{
 "imports": {
    "application": "/assets/application-e61bcfe1fb2f267b11f0acff3d1ed2c1902e04e7916e87a411bb7f388cc63e7a.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js",
    "@hotwired/stimulus": "/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
    "src/custom": "/assets/src/custom-3497ac27760575852bfffaa55b4c5c424eb8db7864e90b39c9b7fd1113d41b78.js",
    "vendor_src/buttons.html5.min": "/assets/vendor_src/buttons.html5.min-ff801aa1b9b1c75fff4cbc8405aed63c1c5ba21ca7166a1dd763d2a3452e043d.js",
    "vendor_src/dataTables.buttons.min": "/assets/vendor_src/dataTables.buttons.min-66377feebbadf9480f9d8001dd24ed6229fa7cd0141f9637ec4b9953779615a3.js",
    "vendor_src/datatables-responsive": "/assets/vendor_src/datatables-responsive-dae0484f9a49d5c68366f086fe1935dd5f912722a3d4b6e19527a84a12719b78.js",
    "vendor_src/datatables": "/assets/vendor_src/datatables-3c7146355ec221e428330b38ecd5892f8afad44047ea4c74337710788f5c8683.js",
    "vendor_src/inputmask": "/assets/vendor_src/inputmask-0a843353ffd01e999ac94f7b4800ed17d08eb47886d0421bd2b55991584a922f.js",
    "vendor_src/jquery.dataTables.min": "/assets/vendor_src/jquery.dataTables.min-3c7146355ec221e428330b38ecd5892f8afad44047ea4c74337710788f5c8683.js",
    "vendor_src/jszip.min": "/assets/vendor_src/jszip.min-10aaae9e48e75307074d0b9b50d342d46f46517cc7370390359d6e8873cf7e1a.js",
    "vendor_src/materialize": "/assets/vendor_src/materialize-9b20e6a3f918ccdbf4faf5be1c79a293c31fa0be516e12e3acf97e13174ae354.js",
    "vendor_src/pdfmake.min": "/assets/vendor_src/pdfmake.min-e038e33bfbc05d2e97d36d9cd1b625e99eaad6e62f7ea69165a0eb1c59318e75.js",
    "vendor_src/vfs_fonts": "/assets/vendor_src/vfs_fonts-b799a394c53502034f3c3c4472da5c377c9a755a74f041fa5104660d009d6e66.js"
  }
}

型
我需要在application.js文件中单独添加所有文件吗？
有人能帮帮忙吗？

ruby-on-rails

来源：https://stackoverflow.com/questions/77608701/javscript-using-importmaps-not-working-looking-for-modules-under-assets

2条答案

按热度按时间

lyfkaqu11#

.使用导入Map，因为我在使用turbo和hotwire时遇到了问题
Importmaps是你在浏览器中导入JavaScript模块的方式。Turbo只是一个javascript框架。你可以毫无问题地使用两者，这是rails 7中的默认设置。
我需要在application.js文件中单独添加所有文件吗？
是的，那可能会更简单。
你不能导入“src”或“vendor_src”，因为你的导入Map中没有它们。如果你想能够导入“目录”，你可以添加index.js文件：

// vendor/javascript/vendor_src/index.js

import "vendor_src/buttons.html5.min"
import "vendor_src/dataTables.buttons.min"
import "vendor_src/datatables"
import "vendor_src/datatables-responsive"
import "vendor_src/inputmask"
import "vendor_src/jquery.dataTables.min"
import "vendor_src/jszip.min"
import "vendor_src/materialize"
import "vendor_src/pdfmake.min"
import "vendor_src/vfs_fonts"

个字符
现在，如果你运行bin/importmap json，你将有“src”和“vendor_src”，它们Map到相应的索引文件：

$ bin/importmap json
{
  "imports": {
...
    "src": "/assets/src/index-dfa1b5d0217643a14ef4b9bbea98e6373417cae7727f2dec8c363f532f02231b.js",
    "vendor_src": "/assets/vendor_src/index-852c266ac3e65f171a9a6ba2d8e036a0246afad24d6681233185147b79d1c294.js",
...
}

型
这些导入现在应该可以工作了：

import "src"
import "vendor_src"

型
另外，不要使用相对导入，如果你不清楚你的导入可以是什么：

>> puts JSON.parse(Rails.application.importmap.to_json(resolver: helper))["imports"].keys.map{%{import "#{_1}"}}
import "application"
import "@hotwired/turbo-rails"
...

型

赞(0）回复(0）举报 12个月前

sxpgvts32#

在Application.js文件中，您应该导入特定的文件或目录，而不仅仅是目录本身。
Application.js

import "src/custom";
import "vendor_src/buttons.html5.min";

字符串
Manifest文件应包含正确的相对路径。

//= link_tree ../images
//= link_tree ../../javascript/vendor_src
//= link_tree ../../../vendor/javascript
//= link_tree ../stylesheets

型

赞(0）回复(0）举报 12个月前

我来回答

ruby-on-rails Javscript使用importmaps无法在assets下查找模块

2条答案

相关问题

热门标签

最新问答