构造函数逻辑无需修改,关键在于匹配运行环境的导出方式:浏览器用全局挂载或IIFE,Node.js用CommonJS,ES模块环境用export语法,跨环境推荐UMD或多格式打包。

构造函数本身是纯逻辑代码,不依赖环境,但导出方式必须匹配目标运行环境——浏览器直接执行、Node.js服务端运行,或经 Webpack/Rollup 打包后的模块系统。关键不在改构造函数,而在用对导出语法和打包配置。
浏览器环境:全局挂载或 IIFE 封装
没有模块系统时,需避免污染全局,又确保能被其他脚本调用:
- 将构造函数赋值给 window 下的属性(如
window.MyClass = class MyClass { ... }),供 HTML 中 script 标签直接使用 - 更安全的做法是用立即执行函数表达式(IIFE)包裹,仅暴露必要接口:
(function (global) {<br> function MathHandle(x, y) { this.x = x; this.y = y; }<br> MathHandle.prototype.add = function() { return this.x + this.y; };<br> global.MathHandle = MathHandle;<br>})(typeof window !== 'undefined' ? window : globalThis);
Node.js 环境:用 CommonJS 导出
Node 默认支持 module.exports 和 require,适配最直接:
- 导出单个构造函数:
module.exports = function MathHandle(x, y) { ... } - 导出多个相关类或工具:
module.exports = { MathHandle, Calculator }; - 注意:ES6
export default在 Node 原生环境中(未启用"type": "module")会报错,不可混用
ES 模块环境(Webpack / Rollup / Vite):统一用 export 语法
现代打包工具默认识别 ES 模块语法,推荐标准写法:
- 命名导出便于按需引入:
export class MathHandle { constructor(x, y) { this.x = x; this.y = y; } add() { return this.x + this.y; } } - 默认导出适合主类:
export default class MathHandle { ... },对应import MathHandle from './math.js' - 若需兼容旧版工具链,可在
package.json中设置"type": "module",并确保构建配置启用 ESM 支持
跨环境通用方案:UMD 包装 + 构建工具输出多格式
一个文件同时适配浏览器、Node、ESM,靠 UMD(Universal Module Definition)模板:
- 手动编写 UMD 包裹器,自动检测环境并选择导出方式(AMD/exports/global)
- 更常用的是用 Rollup 或 Webpack 输出多入口格式:
Rollup 配置中设output: [{ format: 'cjs' }, { format: 'es' }, { format: 'umd', name: 'MathHandle' }] - 最终生成
math.cjs(Node)、math.esm.js(ESM)、math.umd.js(浏览器)三个文件,由使用者按需引入


















