electron是由Github開發，是一個用Html、css、JavaScript來構建桌面應用程序的開源庫，可以打包為Mac、Windows、Linux系統下的應用。
快速開始
接下來，讓代碼來發聲，雷打不動的hello world
創建文件夾，並執行npm init -y，生成package.json文件，下載electron模塊並添加開發依賴
mkdir electron_hello && cd electron_hello && npm init -y && npm i electron -D
下載速度過慢或失敗，請嘗試使用cnpm，安裝方式如下
# 下載cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org # 下載electron cnpm i electron -D
創建index.js，並寫入以下內容
const {app, BrowserWindow} = require('electron')
// 創建全局變量並在下面引用，避免被GC
let win
function createWindow () {
// 創建瀏覽器窗口並設置寬高
win = new BrowserWindow({ width: 800, height: 600 })
// 加載頁面
win.loadFile('./index.html')
// 打開開發者工具
win.webContents.openDevTools()
// 添加window關閉觸發事件
win.on('closed', () => {
win = null // 取消引用
})
}
// 初始化后 調用函數
app.on('ready', createWindow)
// 當全部窗口關閉時退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應用及其菜單欄會保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，當單擊dock圖標並且沒有其他窗口打開時，
// 通常在應用程序中重新創建一個窗口。
if (win === null) {
createWindow()
}
})
創建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1 id="h1">Hello World!</h1>
We are using node
<script>
document.write(process.versions.node)
</script>
Chrome
<script>
document.write(process.versions.chrome)
</script>,
and Electron
<script>
document.write(process.versions.electron)
</script>
</body>
</html>
最后，修改packge.json中的main字段,並添加start命令
{
...
main:'index.js',
scripts:{
"start": "electron ."
}
}
執行npm run start后，就會彈出我們的應用來。
模版
electron-forge包含vue、react、Angular等開箱即用的模版
npm i -g electron-forge electron-forge init my-app template=react cd my-app npm run start
打包
怎么將我們開發好的應用打包成.app或.exe的執行文件，這就涉及到了重要的打包環節, 這里使用electron-quick-start項目進行打包
目前，主流的打包工具有兩個electron-packager和electron-builder
Mac打包window安裝包需下載wine
brew install wine
如果有丟失組件，按照報錯信息進行下載即可
electron-packager
electron-packager把你的electron打包成可運行文件(.app, .exe, etc)
執行npm i electron-packager -g 進行安裝
electron-packager . 快速打包
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git
- sourcedir 項目入口 根據package.json的目錄
- appname 包名
- platform 構建平台 包含
darwin, linux, mas, win32 all - arch 構建架構 包含
ia32,x64,armv7l,arm64 - out 打包后的地址
- icon 打包圖標
- asar 是否生成app.asar, 不然就是自己的源碼
- overwrite 覆蓋上次打包
- ignore 不進行打包的文件
第一次打包需要下載二進制的包耗時會久一些，以后走緩存就快的多了。
electron-builder
electron-builder是一個完整的解決方案，對於macos、windows、linux下的electron app，它可以提供打包及構建的相關功能。同時，它還提供開箱即用的“自動更新”功能支持
npm i electron-builder -D 下載
electron-builder打包
坑坑坑
第一次打包的時候會比較慢，如果你和我手欠直接退出了，再次打包的時候，恭喜你，出錯了。
問題是在下載.zip包的時候，中斷了操作，以后所有執行打包的時候，找不到那個文件（或者是殘缺的文件）就報錯了，需要手動清除下緩存 緩存路徑在~/Library/Caches/electron/
常用參數
electron-builder配置文件寫在package.json中的build字段中
"build": {
"appId": "com.example.app", // 應用程序id
"productName": "測試", // 應用名稱
"directories": {
"buildResources": "build", // 構建資源路徑默認為build
"output": "dist" // 輸出目錄 默認為dist
},
"mac": {
"category": "public.app-category.developer-tools", // 應用程序類別
"target": ["dmg", "zip"], // 目標包類型
"icon": "build/icon.icns" // 圖標的路徑
},
"dmg": {
"background": "build/background.tiff or build/background.png", // 背景圖像的路徑
"title": "標題",
"icon": "build/icon.icns" // 圖標路徑
},
"win": {
"target": ["nsis","zip"] // 目標包類型
}
}
更多本教程來源於掘金，詳細資料參考：https://juejin.im/post/5ba06b67f265da0ae343e89c?utm_source=gold_browser_extension#heading-29