加载电子标签模块时出错，无法在电子中创建标签答案

【问题标题】：Error while loading electron-tabs module & unable to create tabs in electron加载电子标签模块时出错，无法在电子中创建标签
【发布时间】：2019-02-14 13:31:27
【问题描述】：

我已经安装了电子模块包，用于在电子中实现选项卡，如下所示

package.json

{
  "name": "Backoffice",
  "version": "1.0.0",
  "description": "BackOffice application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Karthik",
  "license": "ISC",
  "devDependencies": {
    "electron": "^2.0.8",
    "electron-tabs": "^0.9.4"
  }
}

main.js

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
const path = require("path");
const url = require("url");
const TabGroup = require("electron-tabs");

let win;
const tabGroup = new TabGroup();

function createWindow() {
    win = new BrowserWindow();
    win.loadURL(url.format({
        pathname:path.join(__dirname,'index.html'),
        protocol:'file',
        slashes:true
    }));

    win.on('closed',()=>{
        win = null;
    })
}

app.on('ready', function(){
    createWindow();
    const template = [
        {
            label : 'Backoffice',
            submenu: [
                {
                   label : 'Account Management',
                   click : function () {
                       let tab = tabGroup.addTab({
                       title: "Electron",
                       src: "http://electron.atom.io",
                       visible: true
                    });
                    }
                },
                {
                    label : 'HR Management',
                    click : function () {
                        console.log("CLICK HM menu");
                    }    
                },
             ]

        }
]
    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
});

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>BackOffice</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css">
    </head>
    <body>
        <h1>BackOffice</h1>
        <div class="etabs-tabgroup">
            <div class="etabs-tabs"></div>
            <div class="etabs-buttons"></div>
        </div>
        <div class="etabs-views"></div>
    </body>
</html>

运行 npm start 时出现以下错误

App threw an error during loadReferenceError: document is not defined at Object.<anonymous> (C:\workspace\nodejs_workspace\electron\menu-demo\node_modules\electron-tabs\index.js:3:1)
    at Object.<anonymous> (C:\workspace\nodejs_workspace\electron\menu-demo\node_modules\electron-tabs\index.js:421:3)
    at Module._compile (module.js:642:30)
    at Object.Module._extensions..js (module.js:653:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:504:12)
    at Function.Module._load (module.js:496:3)
    at Module.require (module.js:586:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\DEV_2018\nodejs_workspace\electron\menu-demo\main.js:11:18)

为什么我无法加载电子模块包。
是什么导致了这个错误？如何在点击时创建一个新标签电子应用程序菜单？

【问题讨论】：

如果“electron-tabs”不是在电子中实现标签的正确模块，请建议要在电子中导入的模块以在点击菜单时实现标签。
基本上我的要求是实现我们在 Eclipse IDE 中看到的选项卡。单击每个源文件会打开一个新选项卡，我们也可以在 Eclipse 中拖动该选项卡。

标签： javascript node.js npm electron

【解决方案1】：

可能是因为你在打电话

const tabGroup = new TabGroup();

在页面完成加载之前。

尝试将其拆分为

let tabGroup;

在createWindow()内部：

tabGroup = new TabGroup();

编辑：您必须将 const 更改为 let 或 var，抱歉

【讨论】：

我仍然遇到同样的错误。错误在 const TabGroup = require("electron-tabs") 行。
您是否正确安装了模块？如果您在 require() 函数期间遇到错误，则可能与您的软件包安装有关。尝试进行全新安装：github.com/brrd/electron-tabs
我已经正确安装了模块。我已经安装了 0.9.4 版。 const TabGroup = require("electron-tabs") 如果在 index.html 中使用，则可以正常工作。我猜这个问题是因为 tabGroup 无法找到 HTML 文档对象。

【解决方案2】：

在electron-tabs 的documentation 中，它提到从渲染器进程中调用它，但您是在主进程中进行的。主要过程是您控制电子 API 的地方，例如像您在main.js 中一样打开窗口。每个浏览器窗口都会创建一个新的渲染器进程，它可以与主进程通信或管理自己的文档和 Web API。

您遇到的错误document is not defined 是因为主进程无法访问 DOM，因为您可以从同一个主进程打开多个浏览器；它不知道该使用哪个。所以你需要做的就是在渲染器进程中放一个脚本。创建一个renderer.js，并将electron-tabs 代码（const TabGroup = require("electron-tabs");）放在那里。然后，在你的index.html 中输入<script src="renderer.js"></script>，它应该可以工作了。

【讨论】：

我收到一个错误 - 参考错误：当我将电子标签代码 (const TabGroup = require("electron-tabs"); 移动到 render.js 时，tabGroup 未在 main.js 中定义。我相信 TabGroup 代码应该在 main.js 本身中，因为我想在单击任何菜单时打开一个选项卡，并且菜单代码在 main.js 中
如果您可以粘贴整个源代码，这对我会有帮助且更清楚。提前致谢。
"我相信 TabGroup 代码应该在 main.js 中" 不，不应该。您必须在 Renderer 中初始化它，然后从 Main notify
是的，没错。您在main.js 中管理的菜单内容是顶部菜单栏，如文件、编辑、查看等。所有electron-tabs 代码都应在renderer.js 中，因此任何引用TabGroup 的内容。这就是您收到该错误的原因，因为const tabGroup = new TabGroup() 和tabGroup.addTab(...) 仍在main.js 中。要从主进程与渲染器进程进行通信，这似乎是您想要在菜单栏事件上执行的操作，请查看 ipcMain 和 ipcRenderer。
正确使用 MenuItems 中的 ipc 可能会很棘手，请参阅我的工作代码回答

【解决方案3】：

正如@coolreader18 详细解释的那样，您必须在渲染器进程中使用electron-tabs

这意味着您必须在单击菜单项时通知 main.js 中的 html。 MenuItem 的点击会为您提供呼叫者BrowserWindow，以便您向其发送消息。

main.js

 ...
 {
   label: 'Account Management',
   click: function (menuItem, browserWindow, event) {
     browserWindow.webContents.send('add-tab', {
       title: 'Electron',
       src: 'http://electron.atom.io',
       visible: true
     })
   }
 },
 ...

index.html

<body>
  ...
  <script>
    const { ipcRenderer } = require('electron')
    const TabGroup = require('electron-tabs')
    const tabGroup = new TabGroup()

    ipcRenderer.on('add-tab', (event, arg) => {
      tabGroup.addTab(arg)
    })
  </script>
</body>

【讨论】：