我读了How to add custom JS file to new rails 7 project,我写了Rails 7: How to add custom javascript functions? 我想现在我把事情弄清楚了.

我不想加载模块.我只想加载一个单独的javascript文件,其中包含几个这样的定制函数.

function btn_project_show() {
    alert('culodemono');    
}

有了这个密码……(以及上面帖子中提到的所有其他事情)

<%= javascript_importmap_tags %>

rails创建此代码...(我理解importmap意味着源代码是一个JavaScript模块,而不是一个简单函数的简单文件)

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Admin</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="J96RvzdbOjB5WdfZtE0-eFIoJpISdZP3N32YPIiotPmIsTBlGyL69NlqShdPCadKOv4ReV2PFoGdMZ9CH1kxdw" />

    <link rel="stylesheet" href="/assets/application-ed7f657c82113ab3654e0f1c0a9fb78eb9439717ba426d64a05914a481e366bf.css" data-turbo-track="reload" />
    <link rel="stylesheet" href="/assets/vendor-342cc5ede18e0d08cf0a816961342ad3262763c3e440dbabc6bca4f058bbf174.css" data-turbo-track="reload" />
    <script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js",
    "@hotwired/stimulus": "/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js",
    "custom": "/assets/custom/index-fd29fe543537735de09c23dfa7241cdd8e47c8f9fd71e89211b591fc7c12fd8c.js""
  }
}</script>
<link rel="modulepreload" href="/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js">
<link rel="modulepreload" href="/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js">
<link rel="modulepreload" href="/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js">
<link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js">
<script src="/assets/es-module-shims.min-4ca9b3dd5e434131e3bb4b0c1d7dff3bfd4035672a5086deec6f73979a49be73.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>

但我只想要这样的链接(but create by the assets pipeline with rails assets:precompile)

<script src="/assets/custom/index-fd29fe543537735de09c23dfa7241cdd8e47c8f9fd71e89211b591fc7c12fd8c.js"></script>

否则,我的简单的Java脚本函数就找不到了.

推荐答案

将此内容添加到您的布局中:

<%= javascript_include_tag "custom/index" %>

不要将该文件导入到其他任何地方,并将其对应的pin从Importmap.rb中删除.


请记住,你仍然可以用模块来创建函数,它们只需要被全局化就可以在模块之外使用:

window.btn_project_show = function() {
  alert('culodemono');
} 

Javascript相关问答推荐

为什么JavaScript双边字符串文字插值不是二次的?

为什么getRecord()会因为与_logger相关的错误而失败?(使用Hedera SDK)

react/redux中的formData在expressjs中返回未定义的req.params.id

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状?

为什么!逗号和空格不会作为输出返回,如果它在参数上?

如何在输入元素中附加一个属性为checkbox?

如何在每次单击按钮时重新加载HighChart/设置HighChart动画?

编辑文本无响应.onClick(扩展脚本)

当我在Reaction中创建一个输入列表时,我的输入行为异常

将异步回调转换为异步生成器模式

在JS中动态创建对象,并将其追加到HTML表中

WebSocketException:远程方在未完成关闭握手的情况下关闭了WebSocket连接.&#三十九岁;

为什么延迟在我的laravel项目中不起作用?

将范围 Select 器添加到HighChart面积图

如何在Jest中模拟函数

是否设置以JavaScript为背景的画布元素?

为什么在运行于<;img>;事件处理程序中的JavaScript中x和y是不可变的?

如何在移动设备中使用JAVASSCRIPT移除点击时的焦点/悬停状态

如何使用Angular JS双击按钮