目的

把web項目打包成.exe和其他安裝封包件

什麼是electron？

Electron是由Github開發，用HTML，CSS和JavaScript來建構跨平台桌面應用程式的一個開源庫。 Electron通過将Chromium和Node.js合并到同一個運作時環境中，并将其打包為Mac，Windows和Linux系統下的應用來實作這一目的。可以參考其官網electron官網

項目不論是傳統html、css、JavaScript建構的或目前流行的angular或vue，處理方式都是一樣。因為需求是把現有的項目打包成桌面應用，是以這裡測試我就用angular打包後的檔案和網址做示例。

Electron application 本質上是一個 Node. js 應用程式。與 Node.js 子產品相同，應用的入口是 package.json 檔案。

具體的一個操作步驟流程

1、首先就是安裝electron

npm install electron -g     //全局安裝
npm i -g electron-packager   //安裝打包工具

這裡有官方的文檔：https://electronjs.org/docs/tutorial/installation

2、對應盤目錄中建立空檔案夾，執行指令填寫相應參數

npm init     //在建立的空檔案夾裡邊執行該指令

npm 會幫助你建立一個基本的 package.json 檔案。其中的 main 字段所表示的腳本為應用的啟動腳本，它将會在主程序中執行。如下片段是一個 package.json 的示例：

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js"
}

注意：如果 main 字段沒有在 package.json 中出現，那麼 Electron 将會嘗試加載 index.js 檔案（就像 Node.js 自身那樣）。如果你實際開發的是一個簡單的 Node 應用，那麼你需要添加一個 start 腳本來指引 node 去執行目前的 package：

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "node ."
  }
}

把這個 Node 應用轉換成一個 Electron 應用也是非常簡單的，我們隻不過是把 node 運作時替換成了 electron 運作時。

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

我的package.json

{
  "name": "zxysweb",
  "version": "1.0.0",
  "description": "首次打包",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "electron-packager . electronPKG --win --out ../electronPKG --arch=x64 --app-version=0.0.1 --icon='./favicon.ico'"
  },
  "author": "hxj",
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.0"
  }
}

2、安裝 Electron

現在，您需要安裝electron。我們推薦的安裝方法是把它作為您 app 中的開發依賴項，這使您可以在不同的 app 中使用不同的 Electron 版本。在您的app所在檔案夾中運作下面的指令：

npm install --save-dev electron

除此之外，也有其他安裝 Electron 的途徑。請咨詢安裝指南來了解如何用代理、鏡像和自定義緩存。

3、執行完畢後，我們在其根目錄下建立main.js檔案

const {app, BrowserWindow} = require('electron')
function createWindow () {
  mainWindow = new BrowserWindow({
    width: 1610, // 視窗寬度
    height: 980, // 視窗高度
    fullscreen: false // 全屏模式
  })
  // 裝載的URL位址
  //mainWindow.loadURL('https://electronjs.org')
     // 将本地檔案打包
   mainWindow.loadFile('./dist/index.html')
  // 打開時最大化
  // mainWindow.maximize();
  // 浏覽器F12控制台
  // mainWindow.webContents.openDevTools()
  mainWindow.on('closed', function () {
    mainWindow = null;
  })
}
app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

angular項目可以将其打包後放置其根目錄下即可。

注意loadFile(’./dist/index.html’)與loadURL(‘https://electronjs.org’),一個是将本地web檔案裝在進去，一個是通過遠端網址生成打包，具體相關需要注意的，參考官方文檔說明，這裡僅作示例。

fullscreen:true / false 打開應用程式是否全屏，如同浏覽器中的F11按鍵。

width與height可以指定寬高，具體根據需求及情況而定。

4、最後運作與生成檔案

運作執行：npm start
生成檔案包：npm run pack

到了這裡已經生成類似于綠色安裝的檔案