將一個 JS 文件直接包含在另一個文件中？

Question

假設我有兩個 JS 文件，它們顯然都代表較大的文件。 第一個是root/foo.js ：

let foo = true;

接下來是root/foopolice.js 。 此代碼依賴於root/foo.js ，它本身會引發錯誤：

function patrol(){
  if (foo) alert("Found foo"); // ReferenceError

最后是root/index.html ，將兩者聯系起來：

<script src="/foo.js"></script>
<script src="/foopolice.js"></script>
<button onclick="patrol()">Patrol for foo</button>

問題是，我如何將root/foo.js中定義的變量直接“包含”到root/foopolice.js而不將兩者合二為一？ 使用這兩個腳本標簽是不夠的，因為當我編輯它時， root/foopolice.js仍然會警告不存在的錯誤。 我願意接受使用 JQuery 或只是香草 JS 的解決方案，具體取決於最佳實踐。

Answer 1

通常，構建過程用於創建一個 JS 包，該包將從多個文件中提取和組合所有必需的代碼（請參閱Parcel或ESBuild ）。

如果沒有構建過程，可以使用<script type="module">導入現代JS 模塊（也稱為“ES 模塊”）。 JQuery 可以在 2020 年及以后完全避免。

庫.js

const name = 'Jane Doe'

export {
  name
}

main.js

import { name } from './library.js'

function sayHello() {
  console.log(`hello ${name}!`)
}

window.addEventListener('DOMContentLoaded', event => {
  document.querySelector('button').addEventListener('click', sayHello)
})

索引.html

<script type="module" src="main.js"></script>

<button>Say Hello</button>