Electron程序打包

Electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动

參考博客地址：https://blog.csdn.net/qq_42564846/article/details/82221203

React + Electron搭建桌面應用程序

參考博客地址：https://juejin.im/post/5a6a91276fb9a01cbd58ce32

Electron打包太大如何減小安裝包體積

參考博客地址：https://jingyan.baidu.com/article/359911f5a2244957ff030653.html

接下來是自己從這三個博客中整理的React + Electron 搭建桌面應用的完成流程記錄

本流程主要以windows平台為例，不包括其他平台

1.創建react工程，這裡直接使用react官網提供的npx create-react-app my-app的方式去創建

npx create-react-app my-app

注意：首先要安裝Node.js，確保Node版本 >= 6 以及 npm版本 >= 5.2，在你想要創建react工程的目錄下，在目錄的資源管理器的地址欄中輸入cmd然後回車，就在此目錄下打開了cmd命令行工具，然後輸入上面的node指令就會在該目錄下下載并創建react工程的相應的資源文件。一般這個操作會需要很長的時間，需要耐心等待。

待下載完成之後把此文件夾備份一份，以後直接從備份的文件中直接copy就行了，從而節省開發時間。

2.測試react工程

cd my-app
npm start

在瀏覽器中輸入localhost:3000,查看React App頁面

3.在react工程中添加electron依賴包

npm install -save electron

4.在react工程中新增main.js,代碼如下

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  //mainWindow.loadFile('index.html')
  //mainWindow.loadURL('http://localhost:3000/')
  mainWindow.loadURL(url.format({
	  pathname: path.join(__dirname, './build/index.html'),
	  protocol: 'file:',
	  slashes: true
  }))

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

5.修改package.json文件，全代碼如下：

{
  "name": "react-electron-app",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "dependencies": {
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "electron .",
    "package": "electron-packager . react-electron-app --win --out ./app --app-version=0.0.1 --electron-version=4.0.4"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "homepage": ".",
  "devDependencies": {
    "electron": "^4.0.4"
  }
}

6.打包react項目

npm run-script build

7.打包electron

# 安装electron-packager全局命令，如果安裝了，略過此步驟
npm install electron-packager -g

打包命令是調用package.json中的script下的package

npm run-script package

8.排除無用的node_modules依賴

在打包生成的react-electron-app-win32-ia32的文件夾中進行操作，

根據react-electron-app-win32-ia32\resources\app\node_modules找到node_modules這個node_modules依賴文件夾，

把這個node_modules文件夾刪除。

9.使用Inno Setup生成安裝文件

Inno Setup官方下載鏈接：http://www.jrsoftware.org/isdl.php

打開Inno Setup直接點擊File-->new打開script wizard,按照提示進行相應的操作

最終會在react-electron-app-win32-ia32目錄下生成Output目錄以及setup.exe安裝文件。