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

Question

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: Invalid template for MenuItem: must have at least one of label, role or type

是否可以将 Electron 中的菜单项隔离到它自己的模块中？如果可以，该怎么做？我在搜索 [electron] menuitem or under the documentation

时没有看到提到这个

Answer 1

这应该有效（虽然未经测试）：

主进程:

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 文件可能是不必要的...

Answer 2

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

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.

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

How can a MenuItem be separated into its own module in Electron?

menu

menuitem

electron