微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决Rails 6 中导入的自定义 Javascript 函数

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

快速介绍:在我正在开发的应用程序中,用户可以在处理多项事情时选择一个日期。应用程序需要能够检查该日期并确保该日期不是周末或假期。这发生在几个屏幕上。因此,为了成为一名优秀的小程序员,我不想在我需要的每个 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() {
...
};

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

解决方法

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

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

但是,在 Rails 6.1 中,您仍然可以将旧的资产管道用于 JavaScript 洒水:那些您在多个地方需要但希望保持 DRY 的小部分。

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

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

显然,旧的资产管道是您(和我)应该远离的东西。但这可能会给您一些喘息的空间,直到您这样做为止。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。