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

问题

New to Electron and building menus I'm trying to see if I can separate a MenuItem to prevent an enormous file but I'm having issues. For example I've separated the menu code outside of main.js and I moved menu in a renderer directory within a Menu directory. I can call the Menu from main.js with:

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'}
        ]
    }   
]

and it works but could each menu item be separated further into their own file and what would be the proper way to do that?

I've tried to take mainMenu.js and code it as:

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'}
        ]
    }
]

but I get an error:

TypeError: Invalid template for MenuItem: must have at least one of label, role or type

Can a menu item in Electron be isolated into it's own module and if so how to do it? I didn't see this mentioned when searching [electron] menuitem or under the documentation

回答1:

This should work (untested though):

main process:

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'}
    ]
};

Note: an intermediate mainMenu.js file is probably unnecessary then...

回答2:

I figured out what I was doing wrong. I was writing the Menu Items incorrectly. It should be:

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'}
    ]
}

That will allow me to have each main menu item in its own file and clear main.js.

来源：https://stackoverflow.com/questions/55200616/how-can-a-menuitem-be-separated-into-its-own-module-in-electron

标签

electron

menuitem