📅 最后修改于: 2023-12-03 15:25:14.033000 🧑 作者: Mango
在 JavaScript 中，我们经常需要在一个文件中引用另一个 JS 文件。这种方式使得我们可以封装代码、避免重复编写、提高代码的可维护性。
最简单的引用方式是直接在 HTML 中使用 <script> 标签引入 JS 文件。
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<script src="path/to/your/script.js"></script>
</body>
</html>
在这个例子中，我们在 body 标签中用 script 标签包含了一个 JavaScript 文件。src 属性指向了这个文件的路径。这样，浏览器就会自动下载并执行这个 JS 文件。
随着前端应用的复杂度增加，以及 ES6 的普及，我们往往需要更高级的模块化方案来组织代码。
在 Node.js 中常用的模块化方案是 CommonJS，它的原理是在运行时动态加载模块。在浏览器中，我们可以通过使用工具将 CommonJS 代码转换为浏览器可以理解的格式。
例如，我们可以使用 Browserify 将 CommonJS 代码打包成一个浏览器可用的文件：
$ browserify main.js -o bundle.js
在这个例子中，我们的入口文件是 main.js，-o 参数指定了输出文件的路径。
在 ES6 中，JavaScript 语言原生支持了模块化。我们可以使用 import 和 export 语句来组织代码。在浏览器中使用 ES6 模块需要使用工具将其转换为 CommonJS 或 AMD 格式。
例如，我们可以使用 Babel 将 ES6 模块代码转换为浏览器可以理解的 CommonJS 格式：
$ babel main.js --out-file bundle.js
在这个例子中，--out-file 参数指定了输出文件的路径。
通过使用 <script> 标签或者高级的模块化方案，我们可以很方便地将 JS 文件包含到 JS 中。这样可以提高代码的可维护性和复用性，让我们可以更加专注于解决业务问题。