electron入坑指南
簡介
electron 實際集成chrome瀏覽器和node環境, 運行你寫的網頁
- app 基本目錄結構
index.html名稱可以不是index, 這個文件與普通網頁的區別是它之中要引用<script 'renderer.js'>類似這樣main.js必須為這個名稱, 用於創建窗口和主線程的操作, 能訪問node模塊renderer.js渲染進程, 能訪問被打包的node模塊和瀏覽器
electron-vue
一開始什么都不會, 所以用這個腳手架快速弄一個項目模板肯定是最好的.
electron-vue模板項目弄好后, npm run dev 一切正常.
但當你興高采烈的編譯打包項目時, 就發現GG了. 由於牆, 無法下載...
隨后就發生了一連串問題, 以下是我對每個問題找到的解決方案
electron-builder 由於網絡原因無法下載
Error: connect ETIMEDOUT 52.216.65.240:443
添加以下淘寶鏡像到環境變量
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
下載二進制包到 二進制包緩存目錄
- macOS
~/Library/Caches/electron-builder - linux
~/.cache/electron-builder - windows
%LOCALAPPDATA%\electron-builder\cache
我電腦上 二進制包緩存目錄 有以下文件
-
windows 下
-
linux 下
electron-vue 編譯后運行空白
能夠編譯后不代表能夠運行, 運行后發現一片空白, 通過暴力在renderer.js里每一行輸出alert('xx')來判斷哪里報錯,
發現運行 require('vue') 加載vue時報錯了, 但vue不是應該被webpack打包嗎
於是在 webpack.renderer.config.js 配置里找到了 externals 配置, 發現vue特殊被白名單除外了, 既然被打包了怎么還找不到..
let whiteListedModules = ['vue', 'iview']
// externals 里的都將不被webpack打包
externals: [
...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
],
不管這個了, 我把所有 externals 配置都注釋掉, 都打包進來. 然后發現 HtmlWebpackPlugin 的 nodeModules 字段在運行時是 false
於是改成
// 原來
nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false
// 改成, 一直提供node模塊的目錄
nodeModules: path.resolve(__dirname, '../node_modules')
這樣暴力之后, 報了另一個錯誤, 說什么依賴模塊 vue 未找到
后台想了半天辦法, 還是妥協了
設置環境變量 ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=1 忽略這個報錯
(后來發現正確配置時根本不會爆什么錯或這警告的)
這樣打包出來可以運行了. 雖然有一點大. 我也是后面才體會到為什么 electron-vue 要這么配置
electron-builder 打包配置
我經過摸索, 發現雙 package.json 的形式有許多優勢, 這是我現在采用的方式
開發根目錄的 package.json 打包配置片段
"scripts": {
// ... 省略一些
"build:win": "electron-builder -- win",
"build:deb": "electron-builder --linux deb",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"appId": "com.xueyou.testapp",
// 這里的產品名稱將影響打包出來安裝包的名稱
"productName": "testapp",
"copyright": "Copyright © 2017 ${author}",
"directories": {
// 定義輸出目錄
"output": "release",
// 定義app根目錄, 我的在 dist 目錄里
"app": "./dist"
},
// 將 globa 文件匹配到的文件打包, 這里就是 將 app根目錄下的所有文件打包
"files": [
"./**/*"
],
"win": {
"target": "nsis",
"icon": "dist/icons/icon.ico"
},
"linux": {
"icon": "dist/icons",
"category": "Utility"
}
},
app根目錄的 package.json 打包配置片段,
注意下面的dependencies, 這很重要, 我們想在renderer.js 渲染進程訪問node模塊, 就必須將node模塊打包,
以下的項目依賴就是你的應用能訪問的node外部模塊, 它會在 electron-builder install-app-deps 運行時, 在app根目錄創建node_modules依賴
webpack打包renderer.js時, 要 output 配置 libraryTarget: 'commonjs2', 讓輸出的模塊能訪問node
{
// app 名稱, 注意不是安裝包的名稱
"name": "checkout-counter",
// app 版本
"version": "1.0.1",
// app 說明
"description": "央聯收銀台",
"author": "XueYou <xueyoucd@gmail.com>",
"license": "MIT",
// 入口文件
"main": "./main.js",
// 項目依賴
"dependencies": {
"axios": "^0.17.1",
"echarts": "^3.8.5",
"querystring": "^0.2.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
}
linux 打包失敗
Need executable 'ar' to convert dir to deb
fpm 工具需要 ar 命令才能打包deb, 后來google后發現這個命令包含在binutils
sudo apt install binutils解決依賴順利打包
打包出來的deb安裝時失敗, 會報 libconf-2.so 找不到
suduo apt install -f安裝依賴后, 在安裝deb包就行了
然后就能在運行了
尾巴
以后我再研究怎么自動更新, 如果有疑問可以聯系我
ubuntu 下的運行圖
