使用Electron將Web項目打包成windows桌面應用

1.從官網下載node.js並安裝。

2.有很多人反映使用此命令安裝Electron不成功，多是國外鏡像的問題。

npm install --save-dev electron-prebuilt

3.能夠選擇使用淘寶npm開發的cnpm進行安裝。

//首先安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

//使用cnpm進行安裝，使用方法和npm相同
cnpm install -g electron

4.準備好一個前端web項目（包含html，css，js等的）

5.web項目的目錄應該是

你的項目目錄/
├── package.json
├── main.js
└── index.html

6.package.json的內容

{
  "name"    : "app",
  "version" : "1.0.1",
  "main"    : "main.js"
}

7.main.js的內容

// var app = require('app');  // 控制應用生命週期的模塊。
// var BrowserWindow = require('browser-window');  // 建立原生瀏覽器窗口的模塊

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

// 保持一個對於 window 對象的全局引用，否則，當 JavaScript 被 GC，
// window 會被自動地關閉
var mainWindow = null;

// 當全部窗口被關閉了，退出。
app.on('window-all-closed', function() {
  // 在 OS X 上，一般用戶在明確地按下 Cmd + Q 以前
  // 應用會保持活動狀態
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 當 Electron 完成了初始化而且準備建立瀏覽器窗口的時候
// 這個方法就被調用
app.on('ready', function() {
  // 建立瀏覽器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加載應用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打開開發工具
  mainWindow.openDevTools();

  // 當 window 被關閉，這個事件會被髮出
  mainWindow.on('closed', function() {
    // 取消引用 window 對象，若是你的應用支持多窗口的話，
    // 一般會把多個 window 對象存放在一個數組裏面，
    // 但此次不是。
    mainWindow = null;
  });
});

8.cmd進入web項目根目錄，執行全局安裝命令

npm install electron-packager -g

9.輸入打包命令

electron-packager . app --win --out presenterTool --arch=x64 --electron-version 4.0.5 --overwrite --ignore=node_modules

這個命令什麼意思？藍色部分可自行修改：

electron-packager . 可執行文件的文件名 --win --out 打包成的文件夾名 --arch=x64位仍是32位 --electron-version Electron的版本號 --overwrite --ignore=node_modules

10.打包成功，文件夾目錄如圖

11.以上是最基礎的打包功能，至於窗口大小，菜單欄等這些能夠參考Electron的說明文檔。