因為信奉一句話:JavaScript 終將一統天下,所以要想方設法開疆擴土.

今天介紹的這個electron就是一大神器,可以很方便的將網頁應用打包為Mac, Win, Linux下的可執行文件,只需進行簡單的配置,雖比不上原生的速度和瘦小,但是性價比著實不錯.

一 在package.json中指明對應版本,(electron和electron-builder需放在devDependencies中),使用yarn添加模塊

{
  "name": "electron_example",
  "private": true,
  "scripts": {
  },
  "devDependencies": {
    "electron": "~2.0.2",
    "electron-builder": "~20.7.1"
  }
}

二 添加配置文件,這是最重要的一步,這是我的推薦配置.(名字只能為electron-builder.yml)

appId: app.electron.example # 應用ID
artifactName: "${productName}-${version}.${ext}" # 應用最終的名稱
productName: ‘Electron Example App‘ # 打包完成後的應用名稱
npmRebuild: false # 是否在開始編譯前重構原生依賴,可先嘗試true, 如果出現問題再修改為false,

files:
  - index.js # 打包文件入口,後文將給出
  
directories:
  output: electron_packed/ # 輸出路徑
extraResources:
  - from: "../dist/" #包含的待打包文件
    to: ""
mac: # 打包成mac環境參數
  target: 
    - dmg # 打包為dmg格式(可選pkg,zip等)
  icon: build/icon.icns # 圖標所在路徑
　

dmg: # 安裝界面
  contents:
    - x: 410
      y: 170
      type: link
      path: /Applications
    - x: 130
      y: 170
      type: file

win: # 打包為win環境
  icon: build/icon.ico # 圖標所在路徑
  target:
    - nsis # 打包為nsis格式
  verifyUpdateCodeSignature: false # 是否需要驗證簽名
  # requestedExecutionLevel: requireAdministrator # 執行等級(是否需要管理員權限,通常情況不需要)
nsis:
  oneClick: false # 是否一鍵安裝(靜默安裝)
  createDesktopShortcut: always # 創建桌面快捷方式
  createStartMenuShortcut: true # 創建開始菜單快捷方式
  # include: build/installer.nsh # 是否有額外的自定義安裝需求,
  runAfterFinish: true # 安裝完成後是否勾選立即執行
  
 

三 編寫入口文件 index.js

const electron = require(‘electron‘)const app = electron.app
const BrowserWindow = electron.BrowserWindow 
const ipcMain = electron.ipcMain //EventEmitter class 事件觸發類
const url = require(‘url‘)
const path = require(‘path‘)

let mainWindow = null // 創建全局對象,不然當js對象被垃圾回收的時候窗口會自動關閉

// 創建瀏覽窗口,定義高寬
function
 
 createWindow () {
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 650,
  })

  // 加載本地文件
  mainWindow.loadURL(url.format({
    pathname: path.join(process.resourcesPath, ‘index.html‘),
    protocol: ‘file:‘,
    slashes: true
  }))
　// 調試階段也可加載調試地址
  // mainWindow.loadURL(‘http://localhost:8000/#/‘)

  // 打開調試工具
  // mainWindow.webContents.openDevTools()

  // 窗口關閉時觸發
  mainWindow.on(‘closed‘, function () {
    mainWindow = null
  })
}

// 實現單例,防止程序多開
const iShouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => {    
  // 如果為已有窗口,調用focus,如果最小化,還會恢復窗口   
  if (mainWindow) {    
    if (mainWindow.isMinimized()) mainWindow.restore();
    mainWindow.focus();
  }
});
// 多開退出程序
if (iShouldQuit) {    
  return app.quit();
}    
    
// 加載完成之後調用事件 
app.on(‘ready‘, createWindow)


// 只對windows有效,當所有窗口關閉後退出(OS X會強制一個窗口顯示)
app.on(‘window-all-closed‘, function () {
  if (process.platform !== ‘darwin‘) {
    app.quit()
  }
})

app.on(‘activate‘, function () {
  // 針對在OS X上的dock icon 點擊時創建窗口
  if (mainWindow === null) {
    createWindow()
  }
})
// 開始響應渲染
ipcMain.on(‘response-render‘, (event, arg) => {
  event.sender.sender()
})

以上配置可以基本滿足需求.

註意事項:

1 打包過程應該獨立,所以不應該對項目造成汙染,強烈建議創建一個新的文件夾(比如本文的electron_pack文件夾),放打包配置文件相關信息,包括打包好的文件,盡量避免對項目結構造成破壞

2 打包命令可寫入package.json的腳本(script)中,註意, --project electron_pack是指定待打包文件夾,--win --ia32表示windows下32位,默認不配參數的話會按照當前平臺的參數進行配置.並且需要再指定的打包文件夾中添加package.json(整個項目的package.json只需添加electron和electron_example的模塊依賴),打包所需的配置寫在這裏.

electron_pack文件目錄

.
├── build
│   ├── icon.icns
│   ├── icon.ico
│   └── icons.png
├── electron-builder.yml
├── index.js
└── package.json

項目的package.json

"build:mac": "rm -rf electron_pack/electron_packed && cross-env electron-builder --project electron_pack",
"build:win": "rm -rf electron_pack/electron_packed && cross-env electron-builder --win --ia32 --project electron_pack"

編譯執行命令:

yarn build:mac
yarn build:win

打包所需的package.json (json格式不允許註釋,此處只是便於解釋和理解)

{
  "name": "electron_example", # 項目名(註意與打包名的區別)
  "version": "1.0.0", # 打包版本
  "description": "This is the first version to pack app", # 項目描述
  "main": "index.js", # 主入口(打包入口文件地址)
  "devDependencies": { # 必須在此處指定的依賴
    "electron": "~2.0.2",
    "electron-builder": "~20.7.1"
  },
  "author": "Lorry",
  "license": "ISC"
}

3 指定圖片(icon)都需要放在build文件夾中(嘗試自定義路徑,失敗,如果有知道的朋友可以留言,十分感謝).

4 版本的區別真的很大,如果根據相同姿勢進行操作還是出了問題,請註意版本,我的版本為electron: ~2.0.2 electron-builder:~20.7.1

5 請一定使用yarn方式進行安裝,可以避免一些很微妙的錯誤.

更多詳細功能及自定義請參見electron英文文檔 中文文檔

使用electron進行原生應用的打包