使用 Electron 打包 Web 應用

1、 npm 初始化項目

新建一個文件夾作為項目文件夾
使用 npm init 初始化文件夾
生成一個 package.json 文件
修改 package.json 里面的 "main": "index.js"

2、 安裝 electron 到項目文件夾

在項目文件夾下執行以下命令

npm install --save-dev electron

/** 
  * 這一步我用 cnpm 安裝的，cnpm 的具體安裝方法可百度
  * --save-dev 可以自動更新 package.json 里面的 "devDependencies"， 
  * 不用自己手動更新
 */

3、 新建一個 index.js 入口文件

在項目文件夾里面新建一個 index.js 文件
並在里面復制以下代碼

const { app, BrowserWindow, Menu } = require('electron')

function createWindow () {   
  // 隱藏菜單欄
  Menu.setApplicationMenu(null)
  // 創建瀏覽器窗口
  const win = new BrowserWindow({
    icon: './logo.ico', // 設置窗口左上角的圖標
    show: false,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 下面這兩行代碼配合上面 new BrowserWindow 里面的 show: false，可以實現打開時窗口最大化
  win.maximize()
  win.show()

  // 並且為你的應用加載index.html
  win.loadFile('index.html')

}

// Electron會在初始化完成並且准備好創建瀏覽器窗口時調用這個方法
// 部分 API 在 ready 事件觸發后才能使用。
app.whenReady().then(createWindow)

// 當所有窗口都被關閉后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
  // 否則絕大部分應用及其菜單欄會保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，當單擊dock圖標並且沒有其他窗口打開時，
  // 通常在應用程序中重新創建一個窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// 您可以把應用程序其他的流程寫在在此文件中
// 代碼 也可以拆分成幾個文件，然后用 require 導入。

4、 新建一個 index.html 文件作為項目文件

在項目文件夾里面新建一個 index.html 文件，這個跟 index.js 文件里面聲明的 win.loadFile('index.html') 是一致的

5、 安裝 electron-packager 進行 web 應用打包

在項目文件夾中使用以下命令安裝 electron-packager

npm install --save-dev electron-packager

// 這里同樣可以使用 cnpm 來進行安裝

6、 在 packager.json 中添加相應的 script 腳本

** 注意： **
** 在執行 npm run packager 的時候可能會遇到卡住的情況，**
** 這時候只要設置一下 eletron_mirror 就好了 **
npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

start 這一行可以使用 npm run start 來進行快速的打開運行你的web應用
packager 這一行使用 npm run packager 來進行應用的打包，生成 .exe 等可執行文件

"scripts": {
    "start": "electron .",
    "packager": "electron-packager . 'app' --platform=win32 --arch=x64 --out=./build --electron-version 9.0.2 --app-version 1.0.0 --overwrite --icon=./logo.ico"
  },

然后執行一下 npm run packager 就可以了