找不到電子菜單欄模塊

Question

這是代碼，教程說我應該使用這種語法來使用“menubar”，我也嘗試過將 Menubar 作為“electron”的依賴項，但是用 Menubar 不是構造函數來響應。

這是錯誤消息：

錯誤：找不到模塊“菜單欄”

這是主流程的完整代碼

const path = require('path');
const {
    app, 
    clipboard,
    Menu,
    BrowserWindow,
    globalShortcut,
    Tray,
    systemPreferences,
} = require('electron');

// Declare an empty Array

const clippings = [];

// Declare a variable in the global scope that eventually stores a reference to 
// the tray instance

let tray = null;

// Instead of requiring the app module from Electron, we create an instance of menubar

const Menubar = require('menubar');

const menubar = new Menubar();

// menubar wraps up several common Electron modules. It fires its ready event 
// when the app module fires its ready event

menubar.on('ready', () => {
    console.log('Application is ready.');
})

// The getIcon() function checks the platform the application is running on and 
// returns the appropriate filename

// Initialize a BrowserWindow instance

let browserWindow = null;

const getIcon = () => {
    if (process.platform === 'win32') return 'icon-light@2x.ico';
    // Use the sysemPreferences.isDarkMode() to detect if macOS is in dark mode
    if (systemPreferences.isDarkMode()) return 'icon-light.png';
    return 'icon-dark.png';
};

app.on('ready', () => {

    // Hide the dock icon if running on macOS

    if (app.dock) app.dock.hide();

    // When creating a new tray instance, use getIcon() to get the correct filename

    tray = new Tray(path.join(__dirname, getIcon()));

    // Creates a tray instance by calling the constructor with a path to an image

    // tray = new Tray(path.join(__dirname, '/Icon.png'));

    // On Windows, we register a click event listener to open the menu

    if (process.platform === 'win32') {
        tray.on('click', tray.popUpContextMenu);
    }

    // Initialize browserWindow 

    browserWindow = new BrowserWindow({
        show: false,
    });

    // Load alternative Icon

    browserWindow.loadURL(path.join(__dirname, 'index.html'));

    // Setting an alternate icon for when icon is pressed

    tray.setPressedImage(path.join(__dirname, 'icon-light.png'));

    // Passes a string defining the accelerator and an anonymous function that
    // should be invoked whenever the accelerator is passed

    const activationShortcut = globalShortcut.register(
        'CommandOrControl+Option+C',
        // We register a second shortcut to add a clipping to the array
        () => { tray.popUpContextMenu(); }
    );

    // If registration fails, Electron does not throw an error. Instead, it 
    // returns undefined. In this line, we check if the activationShortcut is defined
    if (!activationShortcut) {
        // If either shortcut fails, we log the issue with console.error. In a
        // more robust application, you might show the user that there was an issue
        // or implement a fallback 
        console.error('Global activation shortcut failed to register');
    }

    const newClippingShortcut = globalShortcut.register(
        'CommandOrControl+Shift+Option+C',
        () => {
            // addClipping() returns the string of the clipping that was added 
            // to the array 
            const clipping = addClipping();

            if (clipping) {
                browserWindow.webContents.send(
                    'show-notification', 
                    // If there was a clipping saved, we send a notification to 
                    // the renderer process, which triggers the notification
                    'Clipping Added',
                    clipping,
                );
            }
        },
    );

    if (!newClippingShortcut) {
        console.error('Global new clipping shortcut failed to register');
    }

    updateMenu();



    // Define a tooltip to be shown when the ser hovers ove the tray icon

    tray.setToolTip('Clipmaster'); 

});

const updateMenu = () => {

    // Build a menu in the same fashion that we built the application and context menus

    const menu = Menu.buildFromTemplate([
        {
          label: 'Create New Clipping',
          // When a user clicks the Create New Clipping menu item, we call addClipping() function
          click() { addClipping(); },
          accelerator: 'CommandOrControl+Shift+C'
        },
        { type: 'separator' },
        ...clippings.slice(0, 10).map(createClippingMenuItem),
        { type: 'separator'},
        {
            label: 'Quit',
            click() { app.quit(); },
            // accelerator for the Quit menu itme
            accelerator: 'CommandOrControl+Q'
        }
    ]);

    // Take the menu created and set it as the menu that appears when the user
    // clicks the icon in the menu or system tray in macOS and Windows, respectively.


    tray.setContextMenu(menu);
};

const addClipping = () => {
    // Uses Electron's clipboard module to read text from the system clipboard
    const clipping = clipboard.readText();

    // Checks if the clippings array already contains the current clippings. If so,
    // returns early from the function 

    if (clippings.includes(clipping)) return;

    // Unshift the text read from teh clipboard into the array of clippings
    clippings.unshift(clipping);

    // Regenerates the menu to display the new clipping as a menu item
    updateMenu();

    return clipping;
}

// Creates a function called createClippingMenuItem()

const createClippingMenuItem = (clipping, index) => {
    return {
        // if the length of the clipping is longer than 20 characters 
        label: clipping.length > 20
        ? clipping.slice(0, 20) + '_'
        : clipping,
        // When a user clicks on a given clipping, writes it to the clipboad
        click() { clipboard.writeText(clipping); },
        // Assign the menu item an accelerator based on its index 
        accelerator: `CommandOrControl+${index}`
    };
};

Answer 1

首先檢查你是否真的安裝了菜單欄倉庫。

或者只是npm i -S menubar

然后嘗試：

const { menubar } = require('menubar');

它似乎不是默認導出。

我只是假設他們指的是 npm 模塊： https ://github.com/maxogden/menubar