前言
前端开发中，我们常常需要将同一段代码用于多个不同的页面或者在不同的项目中复用。CommonJS 是一种流行的模块化规范，在 Node.js 中得到了广泛应用，但是在浏览器环境下需要通过打包工具（比如 Webpack）来实现。本文将会介绍 CommonJS 模块在 Node.js 和浏览器 JavaScript 中的使用方法，帮助读者更好地理解模块化开发以及优化代码结构。
CommonJS 规范
CommonJS 是一种模块化规范，定义了如何组织模块并使其可重复使用。按照此规范编写的模块可以在 Node.js 或者浏览器中运行。
导出模块
在 CommonJS 中，每一个文件都被视为一个模块，可以通过 module.exports 导出模块内容：
-- ------- ----- --- - --- -- -- - - -- ----- -------- - --- -- -- - - -- -------------- - - ---- --------- --
上述代码中，我们定义了两个函数 add 和 subtract，并通过 module.exports 将它们导出为模块。
导入模块
在其他文件中，我们可以通过 require 关键字导入需要的模块：
-- ------ ----- - ---- -------- - - ------------------ ------------------ ---- -- -- - ----------------------- ---- -- -- -
在上述代码中，我们使用 require 导入了 math.js 模块，并使用其中的函数进行了计算。
Node.js 中的 CommonJS 模块
Node.js 是一个 JavaScript 运行环境，支持服务器端的开发和运行。它内置了大量的模块，包括文件系统、网络通信等常用功能，同时也支持通过 require 导入自定义的模块。
核心模块
在 Node.js 中，有一些核心模块可以直接使用，无需通过 npm 安装。比如，我们可以使用 fs 模块读写文件：
----- -- - -------------- ---------------------------- ----- ----- -- - -- ----- ----- ---- ----------------------------- ---
在上述代码中，我们使用 require 导入了 fs 模块，并使用其 readFile 函数异步读取了文件内容。
第三方模块
除了核心模块之外，Node.js 还支持通过 npm 安装第三方模块，然后通过 require 导入使用。比如，我们可以使用 lodash 库进行数组、对象操作：
----- - - ------------------ ----- --- - --- -- --- ------------------------ -- -- - ------------------------ ---- -- -- ---- --- ----
在上述代码中，我们使用 require 导入了 lodash 模块，并使用其中的函数进行了数组操作。
浏览器中的 CommonJS 模块
在浏览器中，CommonJS 模块无法直接运行，需要通过打包工具（比如 Webpack）将其转换为浏览器可执行的代码。这里以 Webpack 为例介绍如何构建前端项目。
安装 Webpack
首先需要安装 Webpack：
--- ------- ------- ----------- ----------
创建配置文件
然后在项目根目录下创建 webpack.config.js 配置文件：
-------------- - -
------ -----------
------- -
--------- ------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------