如何在 Electron 中将 MenuItem 分离到它自己的模块中？答案

【问题标题】：How can a MenuItem be separated into its own module in Electron?如何在 Electron 中将 MenuItem 分离到它自己的模块中？
【发布时间】：2019-08-07 14:19:09
【问题描述】：

Electron 新手和构建菜单我正在尝试查看是否可以分离 MenuItem 以防止文件过大，但我遇到了问题。例如，我在 main.js 之外分离了菜单代码，并将菜单移到了 Menu 目录内的渲染器目录中。我可以从 main.js 调用菜单：

let mainMenu = Menu.buildFromTemplate(require('./renderer/Menus/mainMenu'))

mainMenu.js：

module.exports = [
    {
        label: 'Foo',
        id: 'itemFoo',
        submenu: [
            {label: 'Enter Foo'},
            {label: 'Exit Foo'}
        ]
    },
    {
        label: 'Bar',
        id: 'itemBar',
        submenu: [
            {label: 'Enter Bar'},
            {label: 'Exit Bar'}
        ]
    }   
]

它可以工作，但是每个菜单项可以进一步分离到它们自己的文件中吗？这样做的正确方法是什么？

我尝试使用 mainMenu.js 并将其编码为：

const foo = require('./itemFoo')

module.exports = [
    {foo},
    {
        label: 'Bar',
        id: 'itemBar',
        submenu: [
            {label: 'Enter Bar'},
            {label: 'Exit Bar'}
        ]
    }   
]

itemFoo.js：

module.exports = [
    {
        label: 'Foo',
        id: 'itemFoo',
        submenu: [
            {label: 'Enter Foo'},
            {label: 'Exit Foo'}
        ]
    }
]

但我得到一个错误：

TypeError：MenuItem 的模板无效：必须至少具有以下一项标签、角色或类型

Electron 中的菜单项可以隔离到它自己的模块中吗？如果可以，该怎么做？我在搜索[electron] menuitem 或documentation 下时没有看到提到这一点

【问题讨论】：

标签： menu electron menuitem

【解决方案1】：

我发现我做错了什么。我写错了菜单项。应该是：

main.js:

const { Menu } = require('electron')

let mainMenu = Menu.buildFromTemplate(require('./renderer/Menus/mainMenu'))

app.on('ready', () => {
  mainWindow.createWindow(),
  Menu.setApplicationMenu(mainMenu)
})

mainMenu.js：

const foo = require('./itemFoo')
const bar = require('./itemBar')

module.exports = [
    foo,
    bar
]

itemBar.js:

module.exports = {
    label: 'Foo',
    id: 'itemFoo',
    submenu: [
        {label: 'Enter Foo'},
        {label: 'Exit Foo'}
    ]
}

itemFoo.js:

module.exports = {
    label: 'Bar',
    id: 'itemBar',
    submenu: [
        {label: 'Enter Bar'},
        {label: 'Exit Bar'}
    ]
}

这将允许我将每个主菜单项放在自己的文件中并清除 main.js。

【讨论】：

【解决方案2】：

这应该可以工作（虽然未经测试）：

主进程：

let mainMenuTemplate =
[
    require('./renderer/Menus/itemFoo'),
    require('./renderer/Menus/itemBar')
];
let mainMenu = Menu.buildFromTemplate(mainMenuTemplate);

itemFoo.js：

module.exports =
{
    label: 'Foo',
    id: 'itemFoo',
    submenu: [
        {label: 'Enter Foo'},
        {label: 'Exit Foo'}
    ]
};

itemBar.js：

module.exports =
{
    label: 'Bar',
    id: 'itemBar',
    submenu: [
        {label: 'Enter Bar'},
        {label: 'Exit Bar'}
    ]
};

注意：此时可能不需要中间的mainMenu.js 文件...

【讨论】：