MenuItem如何在Electron中分离为自己的模块? [英] How can a MenuItem be separated into its own module in Electron?

问题描述

Electron和构建菜单的新手，我试图查看是否可以分隔MenuItem来防止庞大的文件，但是我遇到了问题.例如，我已经将菜单代码分离到了 main.js 之外，然后将菜单移动到了Menu目录中的渲染器目录中.我可以使用以下命令从 main.js 调用菜单:

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?

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

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:

itemFoo.js:

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

但是我得到一个错误:

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

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

Electron中的菜单项可以隔离到其自己的模块中吗?在搜索 [电子]菜单项或在

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

推荐答案

我发现我做错了什么.我写菜单项不正确.应该是:

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

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

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

这篇关于MenuItem如何在Electron中分离为自己的模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！