如何使用 Electron.js（使用 Typescript）配置 React？

Question

所以我看了几个关于这个特定主题的教程。这包括 youtube 视频以及浏览 Whosebug。尽管我有一个问题。所以我有这个 package.json:

{
  "name": "electron-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@electron/remote": "^1.0.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^5.0.0-beta1",
    "electron-is-dev": "^1.2.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "main": "public/main.js",
  "homepage": "./",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron:serve": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm electron:start\"",
    "electron:build": "npm build && electron-builder -c.extraMetadata.main=build/main.js",
    "electron:start": "wait-on tcp:3000 && electron ."
  },
  "build": {
    "extends": null,
    "appId": "com.example.electron-cra",
    "files": [
      "dist/**/*",
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "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"
    ]
  },
  "devDependencies": {
    "concurrently": "^5.3.0",
    "cross-env": "^7.0.3",
    "electron": "^11.2.1",
    "electron-builder": "^22.9.1",
    "prettier": "^2.2.1",
    "wait-on": "^5.2.1"
  }
}

是的，我什至去了完整的 Js 来尝试看看这是否是一个问题。原来错误与 Ts 或 Js 相同。当我运行 npm run electron:serve 它给我一个错误说：

> electron-react@0.1.0 electron:serve /home/pc/workspace/react-electron-main
> concurrently -k "cross-env BROWSER=none npm start" "npm run electron:start"

[1] 
[1] > electron-react@0.1.0 electron:start /home/pc/workspace/react-electron-main
[1] > wait-on tcp:3000 && electron .
[1] 
[0] 
[0] > electron-react@0.1.0 start /home/pc/workspace/react-electron-main
[0] > react-scripts start
[0] 
[0] ℹ ｢wds｣: Project is running at http://172.21.62.72/
[0] ℹ ｢wds｣: webpack output is served from 
[0] ℹ ｢wds｣: Content not from webpack is served from /home/pc/workspace/react-electron-main/public
[0] ℹ ｢wds｣: 404s will fallback to /
[0] Starting the development server...
[0] 
[1] /home/pc/workspace/react-electron-main/node_modules/electron/dist/electron: error while loading shared libraries: libgdk_pixbuf-2.0.so.0: cannot open shared object file: No such file or directory
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! syscall spawn
[1] npm ERR! file sh
[1] npm ERR! errno ENOENT
[1] npm ERR! electron-react@0.1.0 electron:start: `wait-on tcp:3000 && electron .`
npm ERR! spawn ENOENT
[1] npm ERR! 
[1] npm ERR! Failed at the electron-react@0.1.0 electron:start script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1] 
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR!     /home/pc/.npm/_logs/2021-08-16T01_34_36_787Z-debug.log
[1] npm run electron:start exited with code 1
--> Sending SIGTERM to other processes..
[0] cross-env BROWSER=none npm start exited with code SIGTERM
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron-react@0.1.0 electron:serve: `concurrently -k "cross-env BROWSER=none npm start" "npm run electron:start"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the electron-react@0.1.0 electron:serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/pc/.npm/_logs/2021-08-16T01_34_36_854Z-debug.log

有人知道如何实际启动它吗？我看到的所有东西要么直接使用这个，要么使用它的一些迭代，但我似乎无法让它发挥作用。如果这对这种情况很重要，我正在研究 WSL2。提前致谢

编辑：我做了更多的改变，但实际上改变的很少。我将 package.json 中的脚本编辑为

"scripts": {
    "r_start": "react-scripts start",
    "r_build": "react-scripts build",
    "r_test": "react-scripts test",
    "r_eject": "react-scripts eject",
    "start": "concurrently \"cross-env BROWSER=none npm run r_start\" \"wait-on http://localhost:3000 && electron .\""
  }

虽然这似乎运行，但事实并非如此。它说的是：

Compiled successfully!
[0] 
[0] You can now view electron-react in the browser.
[0] 
[0]   Local:            http://localhost:3000
[0]   On Your Network:  http://172.21.62.72:3000
[0] 
[0] Note that the development build is not optimized.
[0] To create a production build, use yarn build.
[0] 
[1] /home/pc/workspace/react-electron-main/node_modules/electron/dist/electron: error while loading shared libraries: libgdk_pixbuf-2.0.so.0: cannot open shared object file: No such file or directory
[1] wait-on http://localhost:3000 && electron . exited with code 127

现在我知道 WSL2 需要一个工具来打开桌面应用程序，我有 VcXsrv 并且我能够在 windows 中打开 ubuntu 计算器 ui。所以这个 Windows X 服务器正在工作。

Answer 1

WSL 上的 Electron 有点棘手。这是因为您需要运行 windows 中的 xserver 实用程序（不要太久：https://docs.microsoft.com/en-us/windows/wsl/tutorials/gui-apps）。而且您必须在 WSL 实例上安装一些额外的包。

这是一个不错的步骤指南（感谢 @caseywatts）： https://gist.github.com/caseywatts/9700b402b6b51d1d6af9f0b206739770

如何使用 Electron.js（使用 Typescript）配置 React？

How do i configure React with Electron.js (with Typescript)?

javascript

reactjs

electron