如何导出可同时兼容NodeJS与ES6的JavaScript类？

可以将sharedClass定义在单个文件中，同时兼容Electron渲染器的Node.js环境（CommonJS）和Flask加载页面的ES6模块环境，以下是几种可行方案：

方案1：使用UMD通用模块格式 #

UMD（Universal Module Definition）是一种能同时适配CommonJS、AMD和浏览器全局变量的模块格式，完美满足跨环境需求。

创建shared-class.js文件，内容如下：

(function (global, factory) {
  // 适配CommonJS（Node.js/Electron）
  if (typeof exports === 'object' && typeof module !== 'undefined') {
    factory(exports);
  } 
  // 适配AMD（可选，兼容ES6模块场景）
  else if (typeof define === 'function' && define.amd) {
    define(['exports'], factory);
  } 
  // 适配浏览器全局变量
  else {
    global = typeof globalThis !== 'undefined' ? globalThis : global || self;
    factory(global.shared = {});
  }
}(this, function (exports) {
  class sharedClass {
    sameMethod() {
      // 你的方法逻辑
    }
  }

  exports.sharedClass = sharedClass;
  Object.defineProperty(exports, '__esModule', { value: true });
}));

各环境使用方式 #

• Electron渲染器（Node.js环境）：
  load-render.js保持原有写法：

  const { sharedClass } = require('./shared-class.js');
  

  render-page.html可直接引用该文件：

  <script src="shared-class.js"></script>
  

• Flask加载的ES6环境：
  load-flask.js保持原有ES6导入写法：

  import { sharedClass } from './shared-class.js';
  

  flask-page.html的模块脚本引用不变：

  <script type="module" src="shared-class.js"></script>
  <script type="module" src="load-flask.js"></script>
  

方案2：双导出兼容写法 #

如果不想用UMD的包裹代码，可以直接在文件中同时添加CommonJS和ES6两种导出语句，大部分现代环境（包括Electron和浏览器ES模块）都能兼容。

创建shared-class.js文件：

class sharedClass {
  sameMethod() {
    // 你的方法逻辑
  }
}

// 兼容CommonJS（require）
module.exports = { sharedClass };
// 兼容ES6模块（import）
export { sharedClass };

各环境使用方式 #

直接替换原有两个共享文件，其余代码保持不变即可：

• Flask端的import和Electron端的require写法无需修改
• 两个HTML页面的脚本引用直接指向这个单文件

方案3：统一使用ES6模块（Electron端配置） #

如果愿意调整Electron的配置，可以让渲染器也支持ES6模块，从而统一使用ES6导出格式，彻底消除模块差异。

在Electron的主进程代码（如main.js）中，创建窗口时开启ES模块支持：

const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true, // 若需使用Node.js API则开启
    contextIsolation: false, // 注意：关闭隔离会有安全风险，若需安全可改用preload脚本
    enableRemoteModule: false,
    module: true // 启用ES模块支持
  }
});

然后共享类直接写成ES6模块格式（shared-class.js）：

export class sharedClass {
  sameMethod() {
    // 你的方法逻辑
  }
}

各环境使用方式 #

• Flask端代码完全不变
• Electron渲染器的load-render.js改为ES6导入：

  import { sharedClass } from './shared-class.js';
  

• render-page.html的脚本改为模块类型：

  <script type="module" src="shared-class.js"></script>
  <script type="module" src="load-render.js"></script>
  

内容的提问来源于stack exchange，提问作者user3792705