如何使用Asset Pipeline包含我的所有JS文件？

Question

我正在使用 Ruby on Rails 构建一个网站，在将 javascript 文件包含到项目中时遇到了问题。我在

init.js

目录中有一个名为

app/javascript

的脚本，我希望它包含在我的所有视图中。

如果我没猜错的话，我需要使用 Asset Pipeline 来实现这一点，所以我在

//= require init

文件中写了

app/javascript/application.js

。但是，当我访问网站时，我可以看到

application.js

包含在源选项卡中，但

init.js

不包含：

我还尝试在布局头中写

<%= javascript_include_tag "init" %>

，它有效，但如果我理解正确的话，它不使用资产管道，所以这不是我想要的。

顺便说一下，资产管道按照 CSS 文件的预期工作：我只是将所有 CSS 放入

app/assets/stylesheets

，所有文件的内容都复制到

application.css

，其中有

*= require_tree .

。

以下是一些文件的内容：

app/assets/config/manifest.js

：

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/assets/javascript .js
//= link_tree ../../../vendor/assets/stylesheets .css

app/javascript/application.js

：

import "@hotwired/turbo-rails"
import "controllers"

//= require init

我错过了什么？

Answer 1

您必须创建一个导入映射，然后使用它来导入您的文件：

# config/importmap.rb

pin "init"

$ bin/importmap json
{
  "imports": {
    "application":                "/assets/application-4edf77fd1c5995d5aa4823aefad1ca4255db06546e3f9142669570c749d6b119.js",
    "@hotwired/turbo-rails":      "/assets/turbo-6f8f1796078d2d3f7cb9b6badcd2d5e76287a3c58d97baffaa59dd12bd4135f5.js",
    "@hotwired/stimulus":         "/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
    "init":                       "/assets/init-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js",
...
#   ^ these are imports            ^ these are urls, handled by sprockets

// app/javascript/application.js

import "init"

---

有关所有详细信息：https://stackoverflow.com/a/72855705/207090