Electron构建、打包总结

提示：Application entry file "main.js" does not exist

解决： package.json中的build模块，添加files

1"files": [
2      "./index.html",
3      "./main.js",
4      "./package.json",
5    ],

提示：Application entry file "build/electron.js" does not exist

解决： package.json中的build模块添加：

extends: null

网络原因导致没法下载依赖包(win10)

11.electron-v2.0.18-win32-x64.zip
22.SHASUMS256.txt-2.0.18
33.winCodeSign-2.4.0
44.nsis-3.0.3.2
55.nsis-resources-3.3.0

不同版本所需要包不同，应该按提示手动下载 如： https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z

然后放到指定目录 参考

打包后运行exe(win10)

提示can not find module 'electron-is-dev' can not find module 'devtron'

解决：dependencies添加electron-is-dev

TODO: 这一步还需要优化

打包无法找到别名

1.\src\router\index.js
2Cannot find module: '@views/Login/'. Make sure this package is installed.

解决：

1// package.json
2"build": "react-scripts build",
3// 更新为
4"build": "react-app-rewired build",

npm install时，node install卡住

解决： node install.js

1vi ~/.npmrc
2添加：
3electron_mirror="https://npm.taobao.org/mirrors/electron/"
4ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

运行提示 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

更新 "react-scripts": "3.4.0",

重新install

参考

安装依赖包时提示: UnhandledPromiseRejectionWarning: HTTPError: Response code 404 (Not Found) for http://npm.taobao.org/mirrors/electron/v8.0.1/electron-v8.0.1-darwin-x64.zip

以及npm run dev时提示 Electron failed to install correctly, please delete node_modules/electron and try installing again 解决：

1// cnpm下载electron
2rm -rf node_modules/electron // 删除electron包 不然运行会提示包不对
3// 再用cnpm下载electron
4npm install -g cnpm --registry=https://registry.npm.taobao.org
5cnpm i // 下载electron正确包
6
7
8

构建后 打开 dist/index.html空白

解决： BrowserRouter => HashRouter

运行提示× TypeError: window.require is not a function

解决：

1. BrowserWindow中添加

   webPreferences: { nodeIntegration: true, preload: __dirname + '/preload.js' },

2. 添加preload.js

   window.ipcRenderer = require('electron').ipcRenderer;

3. react组件引入ipcRenderer

   import { IpcRenderer } from 'electron';

   declare global { interface Window { ipcRenderer: IpcRenderer } }

   const { ipcRenderer } = window; console.log(ipcRenderer)