Electron构建打包总结

Posted 2021-03-08 maplechain

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

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

"files": [
      "./index.html",
      "./main.js",
      "./package.json",
    ],

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

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

extends: null

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

1.electron-v2.0.18-win32-x64.zip
2.SHASUMS256.txt-2.0.18
3.winCodeSign-2.4.0
4.nsis-3.0.3.2
5.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: 这一步还需要优化

打包无法找到别名

.src
outerindex.js
Cannot find module: '@views/Login/'. Make sure this package is installed.

解决：

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

npm install时，node install卡住

解决：
node install.js

vi ~/.npmrc
添加：
electron_mirror="https://npm.taobao.org/mirrors/electron/"
ELECTRON_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
解决：

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

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

解决：
BrowserRouter => HashRouter

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

解决：

1. BrowserWindow中添加

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

1. 添加preload.js

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

1. react组件引入ipcRenderer

import { IpcRenderer } from 'electron';

declare global {
  interface Window {
    ipcRenderer: IpcRenderer
  }
}

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