Electron, Webpack, 反應。 使用剪貼板時； 'fs' 未定義

Question

所以我通過export ELECTRON_START_URL=http://localhost:8080 && electron.在反應 / webpack / electron 桌面應用程序中。 我試圖在粘貼組合鍵 (ctrl + v) 時從系統剪貼板中讀取。

所以 electron 有效，我沒有在我的菜單定義中啟用復制和粘貼快捷方式（我不打算有菜單）。

我正在嘗試讀取 React 應用程序中一個組件上的組合鍵...類似於：

import React, { useState, useCallback, useEffect, useRef } from "react";

import {clipboard} from 'electron';

const Thing = (props) {

  const keyboardHandler = (e) => {
    if (e.keyCode === 86 && e.ctrlKey) {
      let pasted = clipboard.readText();
      console.log(pasted);
    }
  }

  useEffect(() => {
    window.addEventListener('keydown', keyboardHandler);
    // Remove event listeners on cleanup
    return () => {
      window.removeEventListener('keydown', keyboardHandler);
    };
  }, []);
 
  return <SomeComp onKeyDown={ (e) => keyBoardHandler(e)}/>

}

export default Thing;

我收到錯誤：

external_"electron":1 Uncaught ReferenceError: require is not defined
    at eval (external_"electron":1)
    at Object.electron (bundle.js:1167)

編輯：這是我的 main.js（電子）代碼：

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

const path = require('path');
const url = require('url');
let mainWindow;

function createWindow () {
  const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '../index.html'),
    protocol: 'file:',
    slashes: true,
  });
  mainWindow = new BrowserWindow({ width: 700, height: 210, frame: true, transprent: true, hasShadow: true });
  mainWindow.loadURL(startUrl);
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.commandLine.appendSwitch("enable-transparent-visuals");
app.on('ready', createWindow);
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

Answer 1

添加“窗口”。 到 require 節點 function 如下：

window.require('electron');

這對我有用，希望對你也有用。