将一个 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>