CommonJS模块无法直接在浏览器运行，需通过Browserify或Webpack打包转换；Browserify专为CommonJS设计，递归解析require并生成IIFE；Webpack兼容性更广但配置复杂，且Node内置API在浏览器中仍受限。
CommonJS 模块本身不能直接在浏览器中运行，因为浏览器不支持 require() 同步加载、没有 module 和 exports 全局对象，也不处理模块作用域隔离。要让 CommonJS 代码在浏览器里执行，必须通过打包工具将其转换成浏览器可识别的格式——核心思路是：把所有依赖提前解析、合并进一个文件，并模拟 Node.js 的模块环境。
Browserify 是专为 CommonJS 设计的打包工具
它是最直接适配 CommonJS 的方案，原理清晰、配置轻量：
- 从入口文件开始，递归分析
require()调用，构建依赖图 - 把每个 CommonJS 模块包裹进函数作用域，注入
module,exports,require参数 - 最终输出一个自执行函数（IIFE），所有模块按依赖顺序拼接，避免运行时同步请求
安装和使用很简单：
npm install browserify --save-dev npx browserify src/index.js -o dist/bundle.js
HTML 中只需引入生成的 bundle.js 即可，就像普通脚本一样运行。
立即学习“Java免费学习笔记（深入）”；
Webpack 也能兼容 CommonJS，但定位更广
它原生支持 CommonJS（也支持 ES Module、AMD 等），不只是“转换”，而是构建整个模块化应用生态：
- 自动处理
require()和module.exports，同时支持动态import()、代码分割、Tree Shaking - 可以加载非 JS 资源（CSS、图片等），通过 loader 扩展能力
- 配置稍复杂，但现代项目中更主流，尤其需要热更新、多环境构建时
关键点在于：Webpack 不需要额外插件就能识别 CommonJS，只要 package.json 中没设置 "type": "module"，.js 文件默认按 CommonJS 解析。
注意 CommonJS 在浏览器打包中的限制
即使打包成功，有些 Node.js 特有行为仍无法直接迁移：
- 不能直接使用
__dirname、__filename（需插件或 polyfill） -
fs、path、os等内置模块在浏览器里无对应实现，调用会报错 - 动态
require(path + '.js')在 Browserify 中不支持（Webpack 有限支持，但路径必须静态可分析）
如果项目重度依赖 Node.js 核心模块，建议优先评估是否真需浏览器端运行，或改用前端友好的替代库（如 path-browserify 替代 path）。
不复杂但容易忽略
