通过“require”功能将菜单导入浏览器窗口答案

【问题标题】：import menu to browser window by "require" function通过“require”功能将菜单导入浏览器窗口
【发布时间】：2020-09-28 06:14:38
【问题描述】：

我正在关注this tutorial 进行电子演示。

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

./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）
解释一下，要求应该执行该文件（恕我直言永远不应该依赖）
@appleapple 有什么建议为什么不应该依赖该方法？

标签： javascript node.js electron commonjs

【解决方案1】：

require 此处不会复制文件（与c++ #include 不同）

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

由于当您调用require 时'./menu/mainmenu' 中没有export，所以它只是执行了那个文件。

这种方法的问题是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') 将静默什么都不做。

【讨论】：