如何正确包装使用电子功能的电子/反应应用程序？ Package.json 文件

问题描述

摘要

我要将我的（工作中的）电子反应应用程序打包到一个Mac应用程序文件中。它构建良好，但是当我启动它时，我只是得到以下错误：

错误：正电子，在... / potoo / dist / mac / potoo.app / Contents / Resources / app.asar中找不到电子

设置

我与电子发生反应。
npm-start工作正常，电子被启动并包含我的应用程序。它还可以访问电子特有的特征，例如“ ipcRenderer”
反应成分放置在src/文件夹中，而电子内容放置在electron/中
我使用npm run build && npm run electron-webpack && npm run pack打包项目，首先构建react项目，然后将其打包到应用程序中。

电子应用程序启动并根据需要渲染窗口，但是当dom加载时，它会显示一条错误消息（请参见上文）而失败。

我认为是什么

由于我通过调用const x = window.require('electron')来加载ipcRenderer，因此无法正确加载电子模块。但是我不能将电子移到依赖项，它只允许将其用作devDependency。

我不知道如何正确引用电子特征，因为它在开发模式下可以正常工作。

其他信息

Package.json

{
    "name": "potoo","version": "0.1.0","author": {...},"description": "...","private": true,"homepage": "./","main": "electron/main.js","dependencies": {
        "@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.5.0","@testing-library/user-event": "^7.2.1","@types/jest": "^24.9.1","@types/node": "^12.12.54","@types/react": "^16.9.46","@types/react-dom": "^16.9.8","nedb": "^1.8.0","react": "^16.13.1","react-dom": "^16.13.1","react-scripts": "3.4.3","typescript": "^3.7.5","uuid": "^8.3.0"
    },"scripts": {
        "start": "nf start -p 3000","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject","electron": "electron .","electron-start": "node src/start-react","react-start": "broWSER=none react-scripts start -c.extraMetadata.main=main/main.js","pack": "electron-builder --dir","dist": "npm run build && build","postinstall": "install-app-deps","compile": "electron-webpack"
    },"electronWebpack": {
        "commonSourceDirectory": "common","main": {
            "sourceDirectory": "electron"
        },"renderer": {
            "sourceDirectory": null
        }
    },"build": {
        "appId": "com.electron.electron-with-create-react-app","win": {
            "icon": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
        },"directories": {
            "buildresources": "assets"
        },"extends": null
    },"files": [
        "./build/**/*"
    ],"eslintConfig": {
        "extends": "react-app"
    },"browserslist": {
        "production": [
            ">0.2%","not dead","not op_mini all"
        ],"development": [
            "last 1 chrome version","last 1 firefox version","last 1 safari version"
        ]
    },"devDependencies": {
        "@types/uuid": "^8.3.0","electron": "^9.2.0","electron-builder": "^22.8.0","electron-webpack": "^2.8.2"
    }
}

文件

├── .DS_Store
├── .eslintrc.json
├── .git
├── .gitignore
├── node_modules/
├── procfile
├── README.md
├── electron
│   ├── database.module.js
│   ├── main.js
│   └── potoo.db
├── package-lock.json
├── package.json
├── public
│   ├── .DS_Store
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── components
│   ├── hooks
│   ├── index.css
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   ├── serviceWorker.ts
│   ├── setupTests.ts
│   └── start-react.js
└── tsconfig.json
```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

electron-builder javascript reactjs reactjs