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

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

我浏览了一些文章，发现我需要将自定义JS放入JS packs文件夹->

app/javascript/packs/currency\u calculations.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

货币计算.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

app/javascript/custom/currency_calculations.js

require("currency")

然后，在视图中，我可以简单地调用想要的JS函数，比如
convert\u curr（“a”，“b”）

提前谢谢。
我想问题是您没有导出js文件中的任何内容。尝试在currency_calculations.js中执行此操作

const funcs = {
   convert_curr() { console.log('foo') }, 
   show_convertion() { console.log('bar') },
}

export default funcs;

然后在代码中使用
funcs.convert\u curr（）

此外，货币计算似乎不应该是它自己的包（你可以想象一个包有点像application.js在链轮中的包），所以最好是packs目录之外的一个独立js文件。（可以是
javascript/currency\u calculations.js
或
javascript/utils/currency\u calculations.j
在Rails 6中有几种方法可以做到这一点

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

//= require currency_calculations

app/javascript/custom/currency_calculations.js

require("currency")

然后，您需要在application.js文件中要求它：

// app/javascript/packs/application.js

// ...

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

require("custom/currency_calculations")

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

你可以这样称呼它：

//= require currency_calculations

app/javascript/custom/currency_calculations.js

require("currency")

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

另一种方法是使用javascript_pack_标记，如果您不想让JS与其他所有内容一起编译，那么可以这样做

在这种情况下，将js文件添加到app/javascript/packs目录。然后在需要时使用“打包标记”帮助器，例如：

<%= javascript_pack_tag 'currency_converter' %>



我最后要说的是。。。您确定不需要其他库来实现它（比如JQuery）吗？在这种情况下，在调用要执行的js文件之前，您需要安装该库并将其导入到application.js中。
一些注释可能会帮助您：

1）当您将一个js文件放在/packs时，它将被编译为一个独立的资产，您可以使用
javascript\u pack\u标记
，因此不需要将它添加到
application.js
pack

根据需要，您有两种选择：


将文件移动到javascript/src/currency\u calculations.js，并将其作为
import'src/currency\u calculations'
或
import'../src/currency\u calculations'
将其作为一个包使用，从application.js中删除，然后像加载
javascript\u pack\u标签“currency\u calculations”一样加载它。

（您可以在application.js中加载该文件，也可以将其作为独立包加载，但代码将加载两次）

2）如果要从视图中的该文件访问函数，则不能像sprocket那样进行访问。链轮将该文件的内容添加到全局范围中，而webpacker包含捆绑上下文中的函数。如果您希望从视图中全局地使用这些函数，则必须使它们全局地执行以下操作

global.convert\u curr=函数（从、到）{
...
}

（您也可以使用
window.convert\u curr=…
）