Electron项目中从外部文件导入Menu的最佳实践咨询

作为Electron新手，针对从./Core/components/Menubar.js导入菜单的需求，以下是当前主流的两种实现方案，对应CommonJS和ES模块两种模块系统：

方案一：CommonJS 模块（默认，无需额外配置） #

1. 编写 Menubar.js（导出菜单构建函数） #

// ./Core/components/Menubar.js
const { Menu } = require('electron');

// 导出构建菜单的函数
exports.buildAppMenu = () => {
  const menuTemplate = [
    {
      label: '文件',
      submenu: [
        { label: '打开', accelerator: 'CmdOrCtrl+O' },
        { type: 'separator' },
        { label: '退出', role: 'quit' }
      ]
    },
    {
      label: '帮助',
      submenu: [{ label: '关于', role: 'about' }]
    }
  ];

  return Menu.buildFromTemplate(menuTemplate);
};

2. 在 Main.js 中导入并使用 #

// Main.js
const { app, BrowserWindow, Menu } = require('electron');
// 注意路径要准确，相对于当前文件的位置
const { buildAppMenu } = require('./Core/components/Menubar.js');

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  
  // 构建菜单并设置为应用菜单
  const appMenu = buildAppMenu();
  Menu.setApplicationMenu(appMenu);

  mainWindow.loadFile('index.html');
});

方案二：ES 模块（需配置 package.json） #

如果你的项目使用ES模块语法（import/export），需要先在项目根目录的package.json中添加：

{
  "type": "module"
}

1. 编写 Menubar.js #

// ./Core/components/Menubar.js
import { Menu } from 'electron';

// 导出菜单构建函数
export function buildAppMenu() {
  const menuTemplate = [
    // 菜单模板内容与方案一一致
  ];
  return Menu.buildFromTemplate(menuTemplate);
}

2. 在 Main.js 中导入并使用 #

// Main.js
import { app, BrowserWindow, Menu } from 'electron';
import { buildAppMenu } from './Core/components/Menubar.js';

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  
  const appMenu = buildAppMenu();
  Menu.setApplicationMenu(appMenu);

  mainWindow.loadFile('index.html');
});

常见错误排查 #

• 路径错误：确保require/import的路径相对于当前文件的位置正确，比如如果Main.js在项目根目录，./Core/components/Menubar.js是正确的相对路径。
• 未正确导出/导入：检查Menubar.js是否用exports/export导出函数，Main.js是否正确解构导入。
• 主进程限制：Electron的Menu API只能在主进程中调用，不要在渲染进程文件中尝试使用。
• buildFromTemplate语法：确保菜单模板的结构符合Electron要求，比如每个菜单项的label、role、submenu等属性拼写正确。

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