时间戳

首页 > 解决方案 > Rails 6 - 加载自定义 JS 文件的正确方法是什么？

javascript - Rails 6 - 加载自定义 JS 文件的正确方法是什么？

问题描述

我很难正确配置和设置我自己的 JS 文件，其中包含用于特定任务的 JS 函数。

我浏览了一些文章，发现我需要将我的自定义 JS 放到 JS packs 文件夹 -> app/javascript/packs/currency_calculations.js：

货币计算.js：

function convert_curr(from, to) {
  ...
}

function show_convertion(curr) {
  ...
}
...

然后我尝试将此自定义 JS 文件添加到app/javascript/packs/application.js：

import Rails from "@rails/ujs";
import "@hotwired/turbo-rails";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
import "controllers";

Rails.start();
ActiveStorage.start();

import "stylesheets/application";

// my custom JS file
import "packs/currency_calculations" // I also tried import "currency_calculations" -- same result

我还尝试将以下内容添加到application.html.erb文件中：

 = javascript_pack_tag 'currency_calculations'

它也没有用。

我仍然收到此错误：

Uncaught Error: Cannot find module 'currency_calculations'

当尝试从视图调用函数时，然后：

Uncaught ReferenceError: convert_curr is not defined

连接它的正确方法是什么？我从 Rails 5 开始使用将我所有的 JS 函数放到一个 js 文件中，而这个文件只是为了添加到这样的文件中app/assets/javascripts/application.js：

//= require currency_calculations

然后，在一个视图中，我可以简单地调用想要的 JS 函数，如convert_curr("a", "b").

先感谢您。

标签： javascriptjqueryruby-on-railsruby

解决方案

在 Rails 6 中有几种方法可以做到这一点。

第一个是创建一个自定义目录并在 application.js 文件中要求它。在这种情况下，您可以创建一个这样的目录：

app/javascript/custom/currency_calculations.js

然后你需要在你的 application.js 文件中要求它：

// app/javascript/packs/application.js

// ...

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("custom/currency_calculations")

如果您将自定义文件夹命名为“货币”，然后将 .js 文件命名为 index.js，则同样的方法也可以简化。

然后你可以这样称呼它：

require("currency")

Require 默认会在文件夹中查找索引文件。但在这种情况下，必须存在索引文件，否则它将失败。

如果您不希望 JS 与其他所有内容一起编译，另一种方法是使用 javascript_pack_tag。

在这种情况下，将 js 文件添加到您的 app/javascript/packs 目录。然后在需要的地方使用 pack 标签助手，例如：

<%= javascript_pack_tag 'currency_converter' %>

我要提到的最后一件事...您确定不需要其他库来使其工作（例如 JQuery）吗？在这种情况下，您需要先安装该库并将其导入您的 application.js，然后再调用您尝试执行的 js 文件。

推荐阅读