GitHub Electron：在所需文件中构建菜单

Question

我在 JavaScript 方面经验丰富，但对 node 和 Electron 还是个新手。我正在尝试从代码示例和我能找到的文档中拼凑出这项技术。

我想将我的菜单代码包含在一个单独的文件中。主要代码在一个名为 renderer.js 的文件中，菜单代码在一个名为 menu.js 的文件中。一个简单的例子：

//  renderer.js
    function doit() {
        alert('hello'); 
    }


    module.exports.doit=doit;                       //  Added
    var q=require('./menu');

    var q=require('./menu');

//  menu.js
    var template = [
        {
            label: 'Test',
            submenu: [
                {
                    label: 'Something',
                    click() {
                        doit();
                    }
                }
            ]   
        }
    ];

    const {remote} = require('electron');
    const renderer=require('./renderer');           //  Added

    const {Menu, MenuItem} = remote;
    const app=remote.app;                           //  Addes
    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);

菜单已创建，但在选择菜单项时，我收到消息：Uncaught ReferenceError: doit is not defined。

我明白消息的意思，显然文件之间没有传递变量。

我怎样才能做到这一点？

更新： 我在示例中添加了一些行，包含下面接受的答案。这现在有效。

显然我没有理解require()的意思。让我感到奇怪的是，每个文件都可以 require 另一个。无论如何......

谢谢

Answer 1

我正在尝试解决同样的挑战。目前我正在调查这个：

https://github.com/ragingwind/electron-menu-loader

他基本上添加了一个属性 'event' 并将其替换为事件处理程序。

Answer 2

如果您希望从一个节点模块访问另一个节点模块中定义的符号，您必须通过 module.exports:

导出它们

// renderer.js
function doit() {
  // ...
}
module.exports.doit = doit;

并通过require加载模块：

// menu.js
const { doit } = require('./renderer');
// OR: const doit = require('./renderer').doit;

var template = [
    {
        label: 'Test',
        submenu: [
            {
                label: 'Something',
                click() {
                    doit();
                }
            }
        ]   
    }
];

Node API docs.

中涵盖了这一点以及更多内容

GitHub Electron：在所需文件中构建菜单

GitHub Electron: build menu in required file

menu

require

electron