时间戳

首页 > 解决方案 > 如何使用单一代码库在浏览器和 PC 中运行 Electron 应用程序

reactjs - 如何使用单一代码库在浏览器和 PC 中运行 Electron 应用程序

问题描述

要求- 使用单一代码库在浏览器和 pc 中运行电子应用程序。

面临的问题- 能够在 pc 中作为桌面应用程序运行，但在浏览器中运行 localhost:3000 时（在我的情况下是 Chrome）面临一些与 window.require 相关的问题。在网上尝试了多种解决方案，但目前没有成功。

用例- 使用 ipcMain 和 ipcRenderer 在电子 js 中的 React 应用程序和 main.js 文件之间进行通信，仅适用于 pc 应用程序。（在浏览器中，我需要将其作为没有电子功能（ipcMain 和 ipcRenderer 通信）的简单 Web 应用程序运行，但我需要应用程序在浏览器中运行以及使用单个代码库）

包.json 文件

{
  "name": "electron-react-redux",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "pouchdb": "^7.2.2",
    "pouchdb-find": "^7.2.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-scripts": "4.0.3",
    "redux": "^4.1.1",
    "redux-saga": "^1.1.3",
    "uuid": "^8.3.2",
    "web-vitals": "^1.0.1"
  },
  "devDependencies": {
    "concurrently": "^6.2.0",
    "electron": "^13.1.7",
    "electron-packager": "^15.3.0",
    "wait-on": "^6.0.0"
  },
  "scripts": {
    "start": "concurrently cross-env BROWSER=none node server 'yarn react-start' 'wait-on http://localhost:3000/ && yarn electron-start'",
    "build": "yarn react-build && yarn electron-build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "react-start": "BROWSER=none react-scripts start",
    "electron-start": "ELECTRON_IS_DEV=1 electron .",
    "react-build": "react-scripts build",
    "electron-build": "electron-packager ./ --overwrite"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我的 PC 配置- (macOs Big Sur | 版本 11.4)

浏览器图片 在此处输入图像描述

电子电脑应用 在此处输入图像描述

由于我是电子 js 的新手，请帮助我提供一些有价值的意见。如果有人遇到并解决了这个问题，请指导我正确的方向。

如果问题未解决或需要其他任何内容，请告诉我。

标签： reactjselectronipcipcrendereripcmain

解决方案

推荐阅读