答案是使用打包工具将 CommonJS模块转化为浏览器可执行的代码。通过Webpack或Browserify等工具，将require语法打包成单个文件，再在HTML中通过script标签引入，实现模块化开发与浏览器兼容的统一。
HTML 本身不支持 CommonJS 模块化规范，因为 CommonJS 是为服务器端（如 Node.js）设计的模块系统，依赖于 require 和 module.exports 语法，而浏览器环境原生并不提供这些功能。直接在 HTML 中通过 script 标签引入使用 require 是无效的。
但你可以通过一些工具和构建流程，将 CommonJS 模块打包成浏览器可运行的代码，再嵌入 HTML 中使用。以下是结合 HTML 与 CommonJS 的常用方法：
1. 使用打包工具（如 Webpack 或 Browserify）
这类工具可以将 CommonJS 模块打包成一个或多个静态文件，供 HTML 引用。
步骤示例（以 Browserify 为例）：
立即学习“前端免费学习笔记（深入）”；
- 安装 Browserify：
npm install -g browserify - 编写 CommonJS 模块（如
main.js）：
// main.js
const utils = require('./utils.js');
console.log(utils.multiply(2, 3));
// utils.js
function multiply(a, b) {
return a * b;
}
module.exports = { multiply };
- 使用 Browserify 打包：
browserify main.js -o bundle.js - 在 HTML 中引入生成的
bundle.js：
此时 HTML 就能运行原本基于 CommonJS 编写的模块代码。
2. 使用 Webpack 构建项目
Webpack 同样支持 CommonJS 语法，并能输出兼容浏览器的 JS 文件。
配置 webpack.config.js：
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js'
}
};
打包后，在 HTML 中引用输出的 bundle.js 即可。
3. 开发时保留 CommonJS，生产时打包输出
开发阶段使用 CommonJS 组织代码结构，提高可维护性；通过构建工具最终输出一个或多个静态 JS 文件，由 HTML 加载执行。
这种方式是目前最主流的做法，既享受模块化带来的便利，又兼容浏览器环境。
4. 不推荐：尝试在浏览器中直接运行 CommonJS
虽然有像 RequireJS 这样的 AMD 工具，或通过 eval + 动态加载 模拟 require，但这些方式复杂、性能差、安全性低，不建议用于现代项目。
CommonJS 不是为浏览器设计的，强行在 HTML 中“直接使用”会带来诸多问题。
基本上就这些。想在 HTML 中“使用” CommonJS，核心思路是：写的时候用 CommonJS，交给工具打包，最后让 HTML 引入打包后的文件。不复杂但容易忽略。
