Electron (js) 错误 - 无法在 saveMusicFile (renderer.js:30:27) 处读取未定义的属性（读取“basename”）

Question

我正在使用 Electron JS 创建自己的小应用程序，并且遇到一个错误，我已经尝试修复了 2 天，错误的本质是用于调用 basename 方法的路径变量未在代码执行的时候，但是我使用 preload 来预加载它，我不知道如何处理它来挣扎，也许我错过了一些东西，无论如何，我希望你的帮助。

预加载.js 文件：

const { contextBridge, ipcRenderer, dialog, fs, path } = require('electron');


contextBridge.exposeInMainWorld('electron', {
  ipcRenderer: ipcRenderer,
  dialog: dialog,
  fs: fs,
  path: path,
});

渲染器.JS：

const { ipcRenderer, dialog, fs, path } = window.electron;

ipcRenderer.send('message', 'Render process');
window.mystuff = {
  selectFile
};

function selectFile() {
  return ipcRenderer.invoke("select-files");
}

document.getElementById('uploadButton').addEventListener('click', async () => {
  try {
    const filePaths = await window.mystuff.selectFile();
    console.log(filePaths);
    saveMusicFile(filePaths[0]); 
  } catch (err) {
    console.error(err);
  }
});


async function saveMusicFile(filePath) {
  try {

    const musicFolderPath = await ipcRenderer.invoke('get-music-list-folder-path');
    
    const fileName = path.basename(filePath);
    const destinationPath = path.join(musicFolderPath, fileName);

    if (!fs.existsSync(musicFolderPath)) {
      fs.mkdirSync(musicFolderPath);
    }

    fs.copyFile(filePath, destinationPath, (err) => {
      if (err) {
        console.error(err);
        return;
      }
      console.log(`File ${fileName} successful saved to MusicList`);
    });
  } catch (err) {
    console.error(err);
  }
}

Main.js：

    const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const path = require('path');
const fs = require('fs');
const fat = false;
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: fat,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadFile('index.html');
}


function createMusicListFolder() {
  const appDirectory = app.getAppPath(); 
  const musicListFolderPath = path.join(appDirectory, 'MusicList');

  if (!fs.existsSync(musicListFolderPath)) {
    fs.mkdirSync(musicListFolderPath);
    console.log('Folder "MusicList" successful created, ok');
  } else {
    console.log('Folder "MusicList" already exists, ok');
  }
}

app.whenReady().then(() => {
  createWindow();
  createMusicListFolder(); 
});
function getMusicListFolderPath() {
  const appDirectory = app.getAppPath(); 
  return path.join(appDirectory, 'MusicList');
}
ipcMain.handle('open-file-dialog', async (event) => {
  const result = await dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [{ name: 'Music', extensions: ['mp3', 'mp4'] }]
  });
  return app.getAppPath();
});
ipcMain.handle('get-music-list-folder-path', (event) => {
  return getMusicListFolderPath();
});
ipcMain.handle('get-project-path', (event) => {
  return app.getAppPath();
});
ipcMain.handle('select-files', async (event) => {
  const result = await dialog.showOpenDialog({
    properties: ['openFile', 'multiSelections']
  });
  return result.filePaths;
});
ipcMain.on('select-files', async (event) => {
  const result = await dialog.showOpenDialog({
    properties: ['openFile', 'multiSelections']
  });
  event.sender.send('selected-files', result.filePaths);
});

澄清一下，预加载文件和渲染器文件位于同一目录中

Answer 1

我删除了错误，它消失了，因为我屏蔽了其他用户未删除的路径，这是js预加载中更正的代码

预加载js :

const path = require('path');
const fs = require('fs')
// Экспортируем модули в контексте render процесса
contextBridge.exposeInMainWorld('electron', {
  ipcRenderer: ipcRenderer,
  dialog: dialog,
  fs: fs,
  path: path,
});

渲染器.js：

const path = window.electron.path;
const fs = window.electron.fs;

;0