通过“需要”功能将菜单导入浏览器窗口

问题描述

我正在按照this tutorial进行电子演示。

只是想知道需求代码行中发生了什么。

./ menu / mainmenu.js 定义菜单项。

const {Menu} = require('electron')
const electron = require('electron')
const app = electron.app

const template = [
  {
    label: 'Edit',submenu: [
      {
        role: 'undo'
      },{
        role: 'redo'
      },{
        type: 'separator'
      },{
        role: 'cut'
      },{
        role: 'copy'
      },{
        role: 'paste'
      },{
        role: 'pasteandmatchstyle'
      },{
        role: 'delete'
      },{
        role: 'selectall'
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

main.js

const { app,browserWindow,ipcMain } = require('electron');
let win;

function createWindow () {
  win = new browserWindow({
    width: 880,height: 660,webPreferences: {
      nodeIntegration: true
    }
  })
  // and load the index.html of the app.
  win.loadFile('index.html')

  require('./menu/mainmenu') //does this line copied the whole mainmenu.js file?
}

require('./menu/mainmenu')是否将整个文件复制到main.js中？

还是导入了一些模块？在mainmenu.js文件中，没有export关键字。

根据node.js documentation，

“ require的基本功能是，它读取一个JavaScript文件，执行该文件，然后继续返回导出对象。”

解决方法

require这里不会复制文件（不同于c++ #include）

它执行文件并返回导出的项目（如果有）

---

由于调用export时'./menu/mainmenu'中没有require，因此它只是执行了该文件。

此方法的问题是require仅会处理文件 一次 *，正确的方法实际上是导出可以多次使用的文件。

---

示例：

./menu/mainmenu.js

//...
const menu = Menu.buildFromTemplate(template)
export default ()=>Menu.setApplicationMenu(menu)

main.js

const { app,BrowserWindow,ipcMain } = require('electron');

let win;

function createWindow () {
  //...

  const setmenu = require('./menu/mainmenu') // you can put this at top,too
  setmenu();

  // or you can execute it inline
  // require('./menu/mainmenu')()
}

注意：您可能需要https://www.npmjs.com/package/babel-plugin-add-module-exports或一些解决方法才能使require和default export一起工作。

---

*此问题是您不能真正依靠它来每次工作，例如从A-> B-> A更改菜单，第二个require('A')将静默不起作用。