Question

我有已发布到生产Web服务器的现有React Apps，但我想使用Electron在桌面上运行它们。但是，我不想打扰React App package.json。我试图通过paachu在Medium上解耦现有的在线教程，但未成功。它一直无法尝试找到React应用程序所需的“ main ... chunk.css”和其他资源。

话虽如此，我在目录./projx/reactApp中有一个可运行的React App，我想在./projx/electronApp中创建一个Electron App，它将使用电子生成器来构建和创建打包的可执行文件。目前不需要开发环境，因为我只需要发布发行包即可。这是一个几乎可以工作的package.json：

{
  "name": "wrappedReact",
  "version": "1.0.0",
  "main": "./src/electron.js",
  "scripts": {
    "preclean": "cross-env rm -rf build",
    "react-prebuild": "cross-env cp -r ../reactApp/build build",
    "build-tsapp": "tsc ./src/electron.ts",
    "electron-prebuild": "mv ./src/*.js ../build",
    "electron-build": "npm run electron-prebuild && electron-builder",
    "build": "npm run preclean && npm run electron-build",
    "startdev": "concurrently \"tsc ./src/electron.ts -w\"  \"cross-env 
       NODE_ENV=dev nodemon --exec \"\"wait-on http://localhost:3000 && 
       electron src/electron.js\"\""
 },
 "author": "sfanjoy",
 "homepage": "./",
 "electron-pack": "build --em.main=build/electron.js",
 "build": {
   "appId": "com.example.reactApp",
   "productName": "ReactApp",
   "copyright": "Copyright © 2019 sfanjoy",
   "files": [
     "build/**/*",
     "node_modules/**/*"
   ],
   "directories": {
     "buildResources": "assets"
   },
   "win": {
     "target": "portable",
     "icon": "assets/app.ico"
  }
},
"dependencies": {
  "@types/electron": "^1.6.10"
},
"devDependencies": {
  "@types/electron": "^1.6.10",
  "concurrently": "^4.1.1",
  "cross-env": "^5.2.1",
  "electron-builder": "^21.2.0",
  "electron-is-dev": "^1.1.0",
  "nodemon": "^1.19.1",
  "typescript": "^3.5.2",
  "wait-on": "^3.2.0"
 }
}

我认为，如果允许您将./src/electron.js注入到预先构建的reactApp \ dist \ win-unpacked \ resources \ app.asar中，则解决方案是使用Electro-builder。然后，我可以复制reactApp / build目录，注入asar，然后调用电子生成器。

到目前为止（IMO）是我遇到的最好的启动设置（样板）： https://github.com/nateshmbhat/electron-react-ts-starter/

如何在不影响React项目的情况下从现有的React项目创建Electron App

0 个答案: