在构建大型 JavaScript 应用程序时，我们经常会面临单个文件变得越来越庞大和难以维护的问题。为了解决这个问题，我们可以将应用程序分割成多个模块或文件，每个模块负责不同的功能。这样做不仅可以使代码更易于管理和扩展，还可以提高应用程序的性能。
CommonJS 和 ES6 模块
在 JavaScript 中，有两种主要的模块系统：CommonJS 和 ES6 模块。CommonJS 是 Node.js 中使用的模块系统，而 ES6 模块是一种新的标准，现在已被支持在现代浏览器中。
CommonJS 模块
CommonJS 模块使用 module.exports 导出模块，使用 require() 引入模块。以下是示例代码：
-- -------------------- ---- ------- -- ------- ----- --- - --- -- -- - ------ - - -- - -------------- - - --- -- -- ------ ----- ---- - ------------------ ----------------------- ---- -- ------- -
在上面的代码中，我们定义了一个名为 sum 的函数，并将其作为对象的属性导出。然后，在 app.js 文件中，我们使用 require() 引入 math.js 文件，并调用 math.sum() 函数。这种方式适合于 Node.js 应用程序中的模块化开发。
ES6 模块
ES6 模块使用 export 导出模块，使用 import 引入模块。以下是示例代码：
-- -------------------- ---- ------- -- ------- ------ ----- --- - --- -- -- - ------ - - -- - -- ------ ------ - --- - ---- ------------ ------------------ ---- -- ------- -
在上面的代码中，我们使用 export 导出了一个名为 sum 的函数，并在 app.js 文件中使用 import 引入它。这种方式适合于现代浏览器和支持 ES6 模块的环境。
模块打包工具
当应用程序开始变得复杂时，手动管理模块之间的依赖关系变得困难。这时候就需要使用模块打包工具，例如 Webpack 或 Rollup。
Webpack 打包工具
Webpack 是一个流行的 JavaScript 模块打包工具，可以将多个文件打包成单个文件。以下是示例配置文件：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ----------
----- ----------------------- --------
--
--在上面的配置文件中，我们指定了入口文件和输出文件的路径。Webpack 将自动解析模块之间的依赖关系，并将它们打包成一个文件。
Rollup 打包工具
Rollup 是另一个流行的 JavaScript 模块打包工具，专注于打包 JavaScript 库和类库。以下是示例配置文件：
-- -------------------- ---- -------
-- ----------------
------ - ------ - ---- -----------------------
------ ------- -
------ ---------------
------- -
----- ---------------
------- -------
----- -----------
--
-------- ----------
--在上面的配置文件中，我们指定了输入文件和输出文件的路径。Rollup 将自动删除未使用的代码，并生成最小化的输出文件。
结论
将 JavaScript 应用程序分割成多个文件可以使代码更易于管理和维护，提高应用程序的性能。我们可以使用 CommonJS 或 ES6 模块来管理模块之间的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28215