在 Rails 6 中導入的自定義 Javascript 函數

Question

我看過很多關於它的帖子，我嘗試了幾種解決方案都無濟於事。 我真的把我的頭發拉到這個上面。

快速介紹：在我正在開發的應用程序中，用戶可以在處理多件事情時選擇一個日期。 應用程序需要能夠檢查該日期並確保該日期不屬於周末或節假日。 這發生在幾個屏幕上。 因此，為了成為一名優秀的小程序員，我不想在我需要的每個 javascript 文件中編寫 check_holiday_or_weekend function 代碼。 我希望能夠在某處的 js 文件中對此進行一次編碼，並能夠在需要時在其他幾個 js 文件中引用它。

在 Rails 4 中，function 位於 application.js 的末尾，隨處可用。

但是，對於 Rails 6.1 和 Webpack，我無法使用 function。

這是我到目前為止所嘗試的。

在 application.js 的末尾添加 function 就像我在 Rails 4 中所做的那樣。當我這樣做時，我收到一個 ReferenceError ，表明 function 不存在或尚未聲明。

在閱讀完該主題后，我發現 Webpack 對范圍非常嚴格，您必須將函數寫入單獨的 js 文件，然后導入該 js 文件，甚至使用視圖中的 <%=javascript_pack_tag %> 導入該文件僅在該視圖上。 我也嘗試過，但無濟於事。

最后，我看到一些解決方案實現了一些看起來更像 ES6 的 realm 和 React 的解決方案，建議將 function 寫入 js 文件並導出 ZC1C425268E683854F1AB5074C17A。 然后，在需要使用的js文件中導入那個function。 所以這就是我所在的地方，它仍然無法正常工作。

所以現在，我的 application.js 保持不變我已經創建了 globals.js 文件，文件如下 function （這只是一個快速測試 function 看看它是否工作）

globals.js

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

然后在特定屏幕 screen_specific.js 上使用的 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

所以從這里開始，我完全不知道 go 的方向，除了在我需要的每個 js 文件中編碼 function 之外。 這真的是非常糟糕的編碼。

注意：我也嘗試過以不同的方式編寫函數，例如

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

or 

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

任何見解或建議將不勝感激。

Answer 1

我只是為自己“解決”了這個問題。 請注意，這是一個非最佳解決方案：它基本上將您的代碼植根於過去並增加了技術債務。 但是，這就是我學到的。

對於 webpacker，范式是 JavaScript 不是“松散的”。 它依附於元素，很少或根本沒有全局 function 的概念。

但是，在 Rails 6.1 中，您仍然可以使用舊的資產管道進行 JavaScript 灑水：在多個地方需要但又想保持 DRY 的那些小東西。

因此，將javascript目錄添加到app/assets 。 然后打開app/assets/manifest.js和 append //= link_directory../javascript.js 。

然后，在您的布局中，您可以為相應的 js 文件添加javascript_include_tag 。 它將以老式方式加載它，並且這些功能應該在該頁面中可用。

顯然，舊的資產管道是你（和我）應該遠離的東西。 但這可能會給你一些喘息的空間，直到你這樣做。