我如何配置React与电子.js(与Typescript)?

Question

我看了几个关于这个主题的教程。这包括youtube视频以及浏览StackOverflow。尽管如此，我还是有一个问题。这里是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，试图看看这是否是一个问题。结果是t和j的误差是一样的。当我运行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，如果这对这个案例很重要的话。提前感谢

编辑:我做了更多的改变，但实际上改变很少。我在包中编辑脚本。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计算器界面。所以这个Windows X服务器是工作的。

Answer 1

Electron on WSL有点棘手。这是因为您需要在windows中运行xserver实用程序(时间不会太长:https://learn.microsoft.com/en-us/windows/wsl/tutorials/gui-apps)。你必须在你的WSL实例上安装一些额外的包。

这是一个循序渐进的指南(来自@caseywatts):https://gist.github.com/caseywatts/9700b402b6b51d1d6af9f0b206739770