將本地 JavaScript 文件導入單個 JavaScript 文件

Question

我有一個 wordpress 站點，該站點加載了一個app.js文件，其中填充了 jQuery 處理整個站點的功能。 它非常長且難以導航。 我想切換到類似於 SCSS 部分方法的方法，我可以為可重用代碼或單個頁面創建單獨的文件，然后將這些文件加載到一個單獨的app.js文件中。

我知道 jQuery 有一個$.getScript() function，但我的理解是我在本地主機上開發時不能使用它，並且由於$.getScript()的性質，嘗試加載本地存儲的文件將不起作用AJAX 請求。

是否有其他選項可以讓我創建更小的 js 片段，然后將它們導入到單個父文件中？ 我不希望為我編寫的每個可重用 js 位在我的<head>中加載 25 個單獨的腳本。

|--js
|  |-- app.js
|  |-- partials
|  |  |-- partialOne.js
|  |  |-- partialTwo.js

Answer 1

一種選擇是將“部分”.js 文件中的數據導出到模塊中並導入到 app.js 中。

作為一個簡單的示例，假設您的 partialOne.js 具有求和和多個值的功能：

let sum = (a,b) => {
    return a+b;
}

let multiply = (a,b) => {
    return a*b;
}

export {sum, multiply};

這里我使用函數，但您可以從 arrays、對象、變量等導出任何內容。現在，在您的 app.js 中，您必須導入它們：

import {sum, multiply} from "./file_path/partialOne.js"

console.log(sum(2,3));
console.log(multiply(5,5));

有關使用模塊的更多信息，請查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

將本地 JavaScript 文件導入單個 JavaScript 文件

問題描述

1 個解決方案

解決方案1
0 2019-10-01 01:35:18

將本地 JavaScript 文件導入單個 JavaScript 文件

問題描述

1 個解決方案

解決方案1 0 2019-10-01 01:35:18

解決方案1
0 2019-10-01 01:35:18