GitHub Electron：所需文件中的构建菜单答案

【问题标题】：GitHub Electron: build menu in required fileGitHub Electron：所需文件中的构建菜单
【发布时间】：2016-09-25 07:48:58
【问题描述】：

我在 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 另一个。反正……

谢谢

【问题讨论】：

你在var q=require('./menu');renderer.js中这样做有什么原因吗？
@VadimMacagon 我不想用菜单代码使rendered.js 代码膨胀，所以我把它分开了。 var q= 用于测试目的，我忘记删除了。

标签： menu require electron

【解决方案1】：

如果您希望从另一个节点模块访问定义在一个节点模块中的符号，您必须通过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 涵盖了这一点以及更多内容。

【讨论】：

这（几乎）完成了这项工作。我已将您的答案纳入我的问题中。谢谢。

【解决方案2】：

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

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

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

【讨论】：