如何在一个JS文件中连接另一个JS文件：5种有效方法

“将你的代码拼凑起来”：为什么不能简单地将一个JS文件插入另一个JS文件中

每个编写JavaScript超过两周的人，迟早都会遇到一堵墙：“我如何使用另一个文件中的函数？难道要把它们复制来复制去吗？！”老牌的Stack Overflow对此深有体会——问题“How do I include a JavaScript file in another JavaScript file?”每月都会获得数千次浏览。这很合理：在实际项目中，代码会迅速增长，将所有内容放在一个文件中只会导致混乱。

在本文中，我们将介绍5种经过验证的方法，用于在一个JS文件中连接另一个JS文件。从古老的方法到现代标准。开始吧！

方法1：HTML中的经典<script>标签

最简单且最古老的方法就是在你的HTML文件中添加多个<script>标签。但有一个问题：文件是按顺序加载的。如果你的main.js依赖于utils.js，那么utils.js必须放在前面。

<!DOCTYPE html><html><head>    <script src="utils.js"></script>    <script src="main.js"></script></head><body>    ...</body></html>

问题：这并不是在一个JS文件内部连接另一个JS文件，而只是加载顺序。如果你有20个脚本，你很容易在依赖关系中迷失方向。此外，所有变量和函数都变成全局的——你好，命名冲突！

方法2：ES6模块（现代标准）

从ES6（ECMAScript 2015）开始，JavaScript内置了模块系统。这是在现代项目中将一个JS文件包含到另一个JS文件中的最正确方法。

从文件导出（math.js）

// math.jsexport function add(a, b) {    return a + b;}

export const PI = 3.14159;

export default function multiply(a, b) {    return a * b;}

在另一个文件中导入（app.js）

// app.jsimport multiply, { add, PI } from './math.js';

console.log(add(2, 3));      // 5console.log(PI);             // 3.14159console.log(multiply(4, 5)); // 20

重要提示：为了在浏览器中工作，需要在HTML中添加type="module"属性：

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

这种方法解决了所有问题：代码隔离、清晰的依赖关系、没有全局变量。非常适合现代Web应用程序。

方法3：Node.js require（CommonJS）

如果你在Node.js下编写代码，标准是使用require()函数的CommonJS。这种方法将一个JS文件包含到另一个JS文件中至今仍用于服务器端开发（尽管ES6模块也已经进入该领域）。

导出（utils.js）

// utils.jsfunction greet(name) {    return `你好，${name}！`;}

const secret = 'myPassword123';

module.exports = {    greet,    secret};

导入（server.js）

// server.jsconst utils = require('./utils.js');

console.log(utils.greet('阿列克谢')); // 你好，阿列克谢！console.log(utils.secret);          // myPassword123

简单、可靠，在任何有Node.js的地方都能工作。对于浏览器则不行，只能通过打包工具（Webpack、Vite）。

方法4：动态加载脚本（创建script标签）

有时需要在运行时从一个JS文件中连接另一个JS文件。例如，当你仅在需要时才加载分析工具或插件。为此，可以动态创建一个<script>标签。

// loadScript.jsfunction loadScript(src, callback) {    const script = document.createElement('script');    script.src = src;    script.onload =