Electron構建、打包總結

提示：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\router\index.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'
      },

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)