在 Rails 6 中导入的自定义 Javascript 函数

Question

我看过很多关于它的帖子，我尝试了几种解决方案都无济于事。 我真的把头发拉到这个上面了。

快速介绍：在我正在开发的应用程序中，用户可以在处理多件事情时选择一个日期。应用程序需要能够检查该日期并确保该日期不属于周末或节假日。这发生在几个屏幕上。所以为了成为一个优秀的小程序员，我不想在我需要的每个 javascript 文件中编写 check_holiday_or_weekend 函数。我希望能够在某个 js 文件中对它进行一次编码，并能够在需要时在其他几个 js 文件中引用它。

在 Rails 4 中，该函数位于 application.js 的末尾，并且随处可用。

但是，在 Rails 6.1 和 Webpack 中，我无法使用该功能。

这是我目前尝试过的。

在 application.js 的末尾添加函数，就像我在 Rails 4 中所做的那样。当我这样做时，我得到一个 ReferenceError ，表明该函数不存在或尚未声明。

在阅读了该主题后，我发现 Webpack 对范围非常严格，您必须将函数写入单独的 js 文件，然后导入该 js 文件，甚至使用 view 仅在该视图上导入该文件。我也试过了，没用。

最后我看到一些解决方案实现了一些看起来更超出 ES6 和 React 领域的东西，建议将你的函数写入 js 文件并导出函数。然后，将该函数导入需要使用的 js 文件中。所以这就是我所在的位置，但它仍然无法正常工作。

所以现在，我的 application.js 保持不变 我已经使用以下函数创建了文件 globals.js（这只是一个快速测试函数，看看它是否工作）

globals.js

export const potato = () => {
  alert("Potato!!);
}

然后在那个特定屏幕上使用的 js 文件中 screen_specific.js

import { potato } from 'globals';

$(document).on("screen_specific#new:loaded screen_specific#create:loaded", function() {
potato();
}

当特定屏幕打开时，什么都没有发生，在控制台中我得到了

Uncaught TypeError: Object(...) is not a function

我也尝试将命名导出更改为默认导出，但我收到相同的错误，尽管消息不同

带有默认导出的globals.js

const potato = () => {
  alert("Potato!!);
};
export default potato;

默认导入的screen_specific.js

import potato from 'globals';

$(document).on("screen_specific#new:loaded screen_specific#create:loaded", function() {
potato();
}

Uncaught TypeError: globals__WEBPACK_IMPORTED_MODULE_0___default() is not a function

所以从这里开始，我完全不知道该往哪个方向发展，除了在我需要的每个 js 文件中编写函数。这真是糟糕的编码。

注意：我也尝试过以不同的方式编写函数，例如

const potato = function(){
...};

or 

var potato = function() {
...
};

我们将不胜感激任何见解或建议。

Answer 1

我只是为自己“解决”了这个问题。请注意，这是一个非最佳的解决方案：它基本上将您的代码植根于过去并增加了技术债务。但是，这是我学到的。

对于 webpacker，范式是 JavaScript 不是“松散的”。它依附于元素，几乎没有或根本没有全局函数的概念。

但是，在 Rails 6.1 中，您仍然可以使用旧的资产管道进行 JavaScript 洒水：那些您在多个地方需要但又想保持 DRY 的小块。

因此，将javascript 目录添加到app/assets。然后打开app/assets/manifest.js 并追加//= link_directory ../javascript .js。

然后，在您的布局中，您可以为相应的 js 文件添加 javascript_include_tag。它将以老式方式加载它，并且这些功能应该在该页面中可用。

显然，您（和我）应该远离旧的资产管道。但这可能会给你一些喘息的空间，直到你这样做。