如何将自定义JS文件添加到新的rails 7项目

Question

我创建了新的rails 7项目rails new my_project，并且遇到了一个问题，要包含要由rails处理的定制JS文件。

我的"javascript/application.js“

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

import "chartkick"
import "Chart.bundle"
import "custom/uni_toggle"

我的自定义JS文件：“javascript/定制/uni_toggle.js”

function uniToggleShow() {
    document.querySelectorAll(".uni-toggle").forEach(e => e.classList.remove("hidden"))
}

function uniToggleHide() {
    console.log("uni toggle hide")
    document.querySelectorAll(".uni-toggle").forEach(e => e.classList.add("hidden"))
}

window.uniToggleShow = uniToggleShow
window.uniToggleHide = uniToggleHide

我在布局<%= javascript_importmap_tags %>中使用

和我的“忏悔/重要”

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

Answer 1

在看完DHH 视频之后，我找到了最后一块拼图。

为了使我的自定义JS代码正常工作，我只是将这一行添加到“confing/I map.rb”中。

pin_all_from "app/javascript/custom", under: "custom"

Answer 2

在我的Rails 7应用程序中添加自定义JS文件也有困难。我甚至跟踪了DHH的视频-> https://www.youtube.com/watch?v=PtxZvFnL2i0，但仍然面临困难。以下步骤对我有效：

1. 转到config/config map.rb，并添加以下内容: pin_all_from“app/javascript/定制”，在“定制”下面
2. 转到app/javascript/application.js文件，并添加以下内容: import "custom/main“
3. 在'app/javascript‘目录中，添加“定制”文件夹。
4. 在‘app/javascript/定制’目录中，添加您的定制js文件'main.js‘。
5. 在终端中运行: rails资产:预编译
6. 启动rails服务器。瓦利亚

Answer 3

假设我们添加了一个插件目录：

app
- javascript
  - plugin
      app.js
      index.js

下面描述的所有内容都可以工作，因为app/javascript目录

• 是Rails.application.config.assets.paths的一部分
• 和app/assets/config/manifest.js

# TLDR

# NOTE: pin a single file
#       file name is relative to `app/javascript`; don't add `.js`
#
pin("plugin/app")        # import "plugin/app"
pin("plugin/index")      # import "plugin/index"


# NOTE: pin all the files in `plugin` directory and subdirectories.
#       directory name is relative to `Rails.root`
#
pin_all_from("app/javascript/plugin", under: "plugin")
                         # import "plugin/app"
                         # import "plugin" // will import plugin/index.js

似乎pin_all_from没有得到任何文档，除了它在默认的importmap.rb中。

pin_all_from(dir，下方: nil，to: nil，预加载: false)

https://github.com/rails/importmap-rails/blob/v1.1.2/lib/importmap/map.rb#L33

def pin_all_from(dir, under: nil, to: nil, preload: false)
  clear_cache
  @directories[dir] = MappedDir.new(dir: dir, under: under, path: to, preload: preload)
end

dir -相对于Rails.root或绝对路径的路径。

选项：

:under -可选引脚前缀。如果您有index.js文件，则需要。

:to -可选的资产路径。将背降为:在选项下。必需的如果:下面是省略。此路径相对于Rails.application.config.assets.paths。

:preload -如果设置为true，则添加模块预加载链接

<link rel="modulepreload" href="/assets/turbo-5605bff731621f9ca32b71f5270be7faa9ccb0c7c810187880b97e74175d85e2.js">

我们可以将所有文件保存在插件目录中：

pin_all_from "app/javascript/plugin", under: "plugin"

# NOTE: `index.js` file gets a special treatment, instead
#       of pinning `plugin/index` it is just `plugin`.
{
  "imports": {
    "plugin/app": "/assets/plugin/app-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js",
    "plugin": "/assets/plugin/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js"
  }
}

以下是这一切是如何结合在一起的：

   "plugin/app": "/assets/plugin/app-04024382391bb...4145d8113cf788597.js"
#   ^      ^      ^
#   |      |      |  
# :under   |      `-path_to_asset("plugin/app.js")
#          |                       ^      ^
#          |                       |      |
#          |..       (:to||:under)-'      |
#  "#{dir}/app.js"                        |
#          '''''`-------------------------'             

在这里，:to选项可能并不明显。如果: to选项被更改，这将使path_to_asset无法找到app.js，这是非常有用的。

例如，：下面的选项可以是你想要的任何东西，但是:to选项必须是资产管道，链轮可以找到的路径(参见Rails.application.config.assets.paths)，也可以预编译(请参阅app/ asset /config/lim.js)。

pin_all_from "app/javascript/plugin", under: "@plug", to: "plugin"

# Outputs these pins
#
#   "@plug/app": "/assets/plugin/app-04024382391b1...16beb14ce788597.js"
#   "@plug": "/assets/plugin/index-04024382391bb91...4ebeb14ce788597.js"
#
# and can be used like this
#
#   import "@plug";
#   import "@plug/app";

指定绝对路径将绕过资产管道。

pin_all_from("app/javascript/plugin", under: "plugin", to: "/plugin")

#   "plugin/app": "/plugin/app.js"
#   "plugin": "/plugin/index.js"
#
# NOTE: It is up to you to set up `/plugin/*` route and serve these files.

若要插入单个文件，请使用pin方法。

引脚(名称，to: 0，预加载: false)

https://github.com/rails/importmap-rails/blob/v1.1.2/lib/importmap/map.rb#L28

def pin(name, to: nil, preload: false)
  clear_cache
  @packages[name] = MappedFile.new(name: name, path: to || "#{name}.js", preload: preload)
end

name -别针的名称。

选项：

:to -可选的资产路径。回到{name}.js。此路径相对于Rails.application.config.assets.paths。

:preload -如果设置为true，则添加模块预加载链接

当固定本地文件时，指定相对于app/javascript目录的名称。

pin("plugin/app")
pin("plugin/index")

# NOTE: produces these pins 
{
  "imports": {
    "plugin/app": "/assets/plugin/app-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js",
    "plugin/index": "/assets/plugin/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js"
  }
}

以下是它是如何结合在一起的：

   "plugin/app": "/assets/plugin/app-04024382391bb...16cebeb14ce788597.js"
#   ^             ^
#   |             |  
#  name           `-path_to_asset("plugin/app.js")
#                                  ^
#                                  |
#              (:to||"#{name}.js")-'

如果要更改引脚的名称，则需要:to选项为path_to_asset提供有效的文件位置。

例如，要为index.js文件获取与从pin_all_from获得的相同的引脚

pin("plugin", to: "plugin/index")

{
  "imports": {
    "plugin": "/assets/plugin/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js"
  }
} 

别忘了，固定你的文件并不会使它们载入。它们必须在application.js或单独的模块标记中导入：

<%= javascript_import_module_tag "plugin" %>

您可以在控制台中处理Importmap，调试和学习哪些工作有效哪些不起作用更快：

>> map = Importmap::Map.new
>> map.pin_all_from("app/javascript/plugin", under: "plugin")

# NOTE: ApplicationController has the required `path_to_asset` helper
>> ApplicationController.helpers.path_to_asset("plugin/app.js")
=> "/assets/plugin/app-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js"

# NOTE: `path_to_asset` searches relative to these paths
>> Rails.application.config.assets.paths

>> puts map.to_json(resolver: ApplicationController.helpers)
{
  "imports": {
    "plugin/app": "/assets/plugin/app-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js",
    "plugin": "/assets/plugin/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js"
  }
}

# `pin` seems so much simpler now
>> map.pin("application")
>> puts map.to_json(resolver: ApplicationController.helpers)
{
  "imports": {
    "application": "/assets/application-8cab2d9024ef6f21fd55792af40001fd4ee1b72b8b7e14743452fab1348b4f5a.js"
  }
}

# Importmap from config/importmap.rb
>> Rails.application.importmap

如果您进行了正确的映射，则相对/绝对导入可以工作：

# config/importmap.rb
pin "/assets/plugin/app", to: "plugin/app.js"

// app/javascript/application.js
import "./plugin/app"

application.js映射到已消化的/assets/application-123.js，因为./plugin/app相对于/assets/application-123.js，所以应该正确地将其解析为具有我们用引脚生成的重要映射的/assets/plugin/app：

"/assets/plugin/app": "/assets/plugin/app-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js",

这也应该是有效的：

// app/javascript/plugin/index.js
import "./app"

然而，尽管import-maps 支持提供了所有的相对导入和绝对导入，但这似乎并不是importmap-rails中的预期用例。