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

EN

在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")

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

然后你就可以这样称呼它：

require("currency")

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

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

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

<%= javascript_pack_tag 'currency_converter' %>

我最不想提的是..。您确定不需要其他库来使其工作(如JQuery)吗？在这种情况下，您需要在调用要执行的js文件之前安装该库并将其导入application.js。

我认为问题在于您没有导出js文件中的任何内容。尝试在currency_calculations.js中这样做

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

export default funcs;

然后在代码中用funcs.convert_curr()调用它们

而且，似乎currency_calculation不应该是自己的包(您可以想到类似于链轮中的application.js那样的包)，所以最好只是包之外的一个独立的js文件。(可能是javascript/currency_calculations.js或javascript/utils/currency_calculations.j的)

一些可能对你有帮助的评论：

1)当您将js文件放在/packs中时，它将被编译为可以使用javascript_pack_tag引用的独立资产，因此不需要将其添加到application.js包中

根据您想要的内容，您有两个选项：

import '../src/currency_calculations'

• use

• 将文件移动到javascript/src/_Calculations.js，并以import 'src/currency_calculations'或javascript_pack_tag 'currency_calculations'的形式导入application.js，将其作为一个包从application.js中删除，并像使用javascript_pack_tag 'currency_calculations'

一样使用加载

(您可以将文件加载到application.js中，也可以作为独立的包加载，但代码可以加载两次)

2)如果您想在视图中访问该文件中的函数，就不能像链轮那样这样做。链轮在全局范围内添加该文件的内容，而webpacker则在包上下文中包含函数。如果您希望从视图中全局使用这些函数，则必须使它们具有全局功能，例如

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

(您也可以使用window.convert_curr = ...)