electron 打包web應用
時下流行的web app打包工具主要有兩個,一個是國內開發者主導的nw.js
,另一個是國外大廠支撐的electron
。對比了nw.js
以及electron
之後還是選擇了electron
,原因主要有以下幾點:
- 1、基於該工具已有廣泛被使用的產品,如:
atom
、vs code
等。 - 2、在開發者中口碑比較好,有大公司參與進來,遇到問題,提個
issue
能很快得到響應。
下載基於electron
打包的HolaStudio。
使用webpack
編譯專案
HolaStudio
離線版本打包的時候需要把伺服器、客戶端打包到一個安裝包內。所以第一步首先要把伺服器程式碼混淆,為接下來打包做準備。
構建工具選擇了webpack
, 關於構建工具沒有做很細緻的篩選,因為我都不熟悉:)。所以就聽從朋友建議,選擇了入了webpack
的坑。
關於webpack
的使用,官方有詳細的文件說明,github
自行搜尋。
webpack
需要一個配置檔案(webpack.config.js
),用來描述專案的環境,以及第三方外掛的整合等資訊:
var webpack = require('webpack');
var path = require('path');
var fs = require('fs-extra');
var packageJSON = fs.readJsonSync('./package.json' );
var nodeModules = {};
fs.readdirSync('./node_modules')
.filter(function(x) {
return ['.bin', '.npminstall'].indexOf(x) === -1;
})
.filter(function(y) {
return !(y in packageJSON.devDependencies);
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
entry: './app.js' ,
target: 'node',
context: __dirname,
node: {
__dirname: false,
__filename: false
},
output: {
path: path.join(__dirname, 'output'),
filename: 'output.js',
externals: nodeModules,
},
externals: nodeModules,
plugins: [
new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),
new webpack.IgnorePlugin(/\.(css|less)$/)
]
}
簡要的說明:
- entry: 指定專案的入口檔案,即啟動node
服務指定的檔案
- target: 指定當前的編譯環境為node
, 其他選擇有web
、webworker
等
- context: 指定一個路徑找到entry
檔案
- node: 用於指定一些nodejs
環境配置 __dirname=false 表示啟用__dirname 變數(預設為’/’), __filename=false 表示啟用__filename 變數(預設為’/index.js’)。
- output: 指定編譯輸出檔案及目錄
- externals: 指定外部依賴庫檔案
- plugins: webpack
外掛整合,這裡主要用到了一個混淆外掛
執行 webpack .
會在當前目錄下的output
資料夾得到編譯輸出檔案。
安裝electron
以及相關工具
- 執行命令
npm i -g electron-prebuilt
安裝electron
。
簡要說說關於electron
的設計理念:
electron
打包的應用分為主程序和渲染程序,渲染程序使用Chromium
來展示頁面,主程序以類似建立視窗的方式建立網頁。主程序具備呼叫系統相關服務的功能,主程序和渲染程序之間以程序間通訊
的方式互動。 更詳細的electron
說明文件.
在打包HolaStudio
的過程中,選擇把node
服務端程式碼放在主程序,編輯器放在一個渲染程序。
electron
專案的構建目錄結構:
在該目錄下執行electron .
即可調式electron
應用。
所以在啟動electron
應用的過程中,需要啟動node
後臺的同時建立一個渲染視窗顯示編輯器。
//處理windows 應用安裝以及更新時刻的預設事件
if(require('electron-squirrel-startup')) return;
var app = require('app');
var path = require('path');
var electron = require('electron');
var BrowserWindow = require('browser-window');
var globalShortcut = require('global-shortcut');
var mainWindow = null;
var webContents = null;
//所有視窗被關閉
app.on('window-all-closed', function() {
// 在 OS X 上,通常使用者在明確地按下 Cmd + Q 之前
// 應用會保持活動狀態
if(process.platform != 'darwin') {
app.quit();
}
});
//當前應用準備退出
app.on('will-quit', function() {
globalShortcut.unregisterAll();
});
// 當 Electron 完成了初始化並且準備建立瀏覽器視窗的時候
app.on('ready', function() {
global.mainProcess = app;
require('./hola_studio.js');
registerShortcut();
});
//hola_studio 伺服器發出`done`事件後,準備渲染編輯器介面
app.on('done', function(url) {
var electronScreen = electron.screen;
var size = electronScreen.getPrimaryDisplay().workAreaSize;
mainWindow = new BrowserWindow({resizable: true, width: size.width, height: size.height,
title: 'HolaStudio'});
mainWindow.loadURL(url);
webContents = mainWindow.webContents;
mainWindow.on('closed', function() {
mainWindow = null;
webContents = null;
});
});
//註冊快捷鍵用於開啟開發者工具以及重新整理當前頁面
function registerShortcut() {
function doRegister(cmd, callback) {
globalShortcut.register(cmd, callback);
}
doRegister('F12', function() {
var win = BrowserWindow.getFocusedWindow();
win.webContents.toggleDevTools();
console.log("toggleDevTools F12");
});
//windows 平臺下`F12`按鍵按下收不到訊息(貌似還沒有解決方案),所以寫了一個替代按鍵
doRegister('F6', function() {
var win = BrowserWindow.getFocusedWindow();
win.webContents.toggleDevTools();
console.log("toggleDevTools F6");
});
doRegister('F5', function() {
var win = BrowserWindow.getFocusedWindow();
win.reload();
console.log("refresh");
});
return;
}
如果之前有做過MFC
、QT
類GUI的開發,對electron
這樣的工作流程一定非常熟悉。
安裝electron-builder
工具來編譯安裝包
electron-builder
把幾個不同平臺的安裝包編譯工具整合到一起,得到一個統一的介面,方便使用。
electron-builder
建議把構建目錄分為兩層,上面一層主要管理編譯工具、構建所需的資源以及構建的輸出,稱之為dev 目錄。下面一層則為以electron
為入口的工程目錄,稱之為app 目錄。
dev
目錄預覽:
app
目錄預覽:
需要做的工作很簡單:
- 安裝構建工具(electron、electron-prebuilder)
- 修改dev目錄下package.json
指定編譯指令碼
- 修改app目錄下package.json
指定編譯選項
- 執行指令碼編譯安裝包
dev 目錄下package.json
預覽:
{
"name": "HolaStudio",
"version": "0.0.1",
"homepage": "http://studio.holaverse.cn",
"description": "HolaStudio Release Version.",
"scripts": {
"dist": "npm run dist:linux && npm run dist:win",
"dist:osx": "build --platform darwin --arch all -d",
"dist:win": "build --platform win32 --arch all -d",
"dist:linux": "build --platform linux --arch all -d"
},
"keywords": [
"HolaStudio"
],
"author": "holaverse Tech Inc.",
"license": "ISC",
"devDependencies": {
"electron-builder": "^2.11.0",
"electron-prebuilt": "^0.37.2"
},
"build": {
"osx": {
"title": "HolaStudio",
"background": "build/background.png",
"icon": "build/icon.icns",
"icon-size": 128,
"contents": [
{
"x": 355,
"y": 125,
"type": "link",
"path": "/Applications"
},
{
"x": 155,
"y": 125,
"type": "file"
}
]
}
}
}
scripts
欄位指定npm
編譯不同平臺的執行指令碼。build
指定編譯時載入的資源配置
app 目錄下package.json
增加編譯時配置選項(最新版本electron-builder
已經把它提出到dev
目錄下的package.json
)
javascript
"build": {
"asar": false,
"iconUrl": "http://7xsec6.com1.z0.glb.clouddn.com/icon.ico",
"app-bundle-id": "holaverse.studio",
"app-category-type": "public.app-category.productivity"
},
- asar告訴打包工具,不要壓縮資原始檔,因為在HolaStudio
執行過程中,需要頻繁改動專案路徑下檔案。
- iconUrl指定windows安裝包icon url
- app-bundle-id/public.app-category.productivity,mac平臺下編譯選項
更詳細的配置文件請看這裡。
成功打包了各種平臺的安裝包後,後續需要做的是閱讀electron
文件,在有新需求的時候能夠很快的處理掉。