【打包】

接上回?Electron那些事01：起步_uikoo9的專欄-CSDN博客

簡(jiǎn)單介紹了electron，以及使用electron做了一個(gè)桌面應(yīng)用demo，

相信大家現(xiàn)在最想做的事情就是將桌面應(yīng)用打包后發(fā)給其他人體驗(yàn)，本節(jié)開始electron打包

【electron-packager】

官方推薦的打包工具有3個(gè)

幾個(gè)工具的區(qū)別后續(xù)單獨(dú)寫一篇文章介紹，

簡(jiǎn)單的說electron-forge和electron-builder都是打包工具集功能比較多，適合想快速上手的小伙伴，但是遇到一些定制化的需求也比較難受

本節(jié)使用electron-packager打包?，GitHub - electron/electron-packager: Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI

【查看electron應(yīng)用內(nèi)容】

講打包前需要先說一下用electron開發(fā)的應(yīng)用的大體結(jié)構(gòu)，

就拿vscode來說吧，找到vscode后右鍵點(diǎn)擊顯示包內(nèi)容，

可以看到包內(nèi)容如下

大家可以找找你在使用的應(yīng)用，相信我，使用electron應(yīng)用還是挺多的

凡是Contents/Resources/app這類型目錄結(jié)構(gòu)，十有八九是electron應(yīng)用，

且app文件夾下是你主要是的代碼，resources外的是系統(tǒng)層級(jí)的代碼，

也就是說不管你用electron開發(fā)多少個(gè)應(yīng)用，resources內(nèi)的部分會(huì)不同，resources外的大體相同?

那么怎么判斷到底是不是electron開發(fā)的，可以看這個(gè)目錄contents/macos/下，

【開發(fā)和打包的不同】

講了electron應(yīng)用大概的目錄結(jié)構(gòu)，下面要說一下開發(fā)時(shí)應(yīng)用跑起來和打包后應(yīng)用跑起來的不同

開發(fā)時(shí)，拿上一節(jié)的代碼為例，紅框了幾個(gè)重點(diǎn)

1.左側(cè)紅框內(nèi)的文件，是你應(yīng)用跑起來的實(shí)際代碼，

上面示例和是代碼項(xiàng)目其他文件同一層級(jí)的，有一些混淆，就是你應(yīng)用中真正有用的是左側(cè)紅框內(nèi)的代碼

2.本地開發(fā)是應(yīng)用跑起來的原理

執(zhí)行npm start，也就是npm run start

等同于執(zhí)行electron .

electron會(huì)在.（當(dāng)前目錄）去找package.json中的main屬性，值為main.js，這個(gè)是入口

然后和main.js關(guān)聯(lián)的index.html，preload.js，util/menu.js對(duì)應(yīng)的運(yùn)行起來

3.為什么開發(fā)時(shí)electron在devDependencies內(nèi)

大家有沒有注意到electron的npm包是在devDependencies內(nèi)，而不是在dependencies內(nèi)，

是因?yàn)閑lectron并不是你應(yīng)用打包后運(yùn)行依賴的npm包?

應(yīng)用打包時(shí)通過打包工具將electron環(huán)境打到包內(nèi)，提供electron的環(huán)境

所以electron這個(gè)npm包放到devDependencies內(nèi)，完全是為了你本地開發(fā)的時(shí)候有electron環(huán)境

這個(gè)還是比較重要的一點(diǎn)，可以多理解下

4.那么問題來了

那么可以看到上圖代碼，其實(shí)是“開發(fā)環(huán)境各文件”和“electron應(yīng)用實(shí)際代碼”的混合，

目前這個(gè)代碼結(jié)構(gòu)不合理，就是一個(gè)demo，但是實(shí)際中可能發(fā)布后的應(yīng)用也是這種結(jié)構(gòu)。。

【拆分代碼】

1.將上述electron應(yīng)用實(shí)際代碼拆分到src文件夾下

2.為electron應(yīng)用定制了一個(gè)package.json，

3.這個(gè)package.json的name和外層的不同，可以理解為你應(yīng)用最終的名字

4.這個(gè)package.json中有dependencies，這個(gè)是electron應(yīng)用實(shí)際以來的npm包

5.右側(cè)的package.json是原來外層package.json，可以看到刪除了main屬性同時(shí)將start命令修改為electron src，意思是讓electron執(zhí)行src內(nèi)的代碼

以上代碼見：GitHub - insistime/electron-guides at 0.0.4

【electron-packager打包】

electron-packager的打包也比較簡(jiǎn)單，詳見：Options | electron-packager?

代碼如下

// electron pakcager var electronPackager = require('electron-packager');// options var options = {dir : 'src',out : 'out',appCopyright : 'Copyright ? 2022 vq版權(quán)所有',appVersion : '0.0.1',overwrite : true,arch : 'x64',name : 'vq' };// pack electronPackager(options);

dir是源文件的目錄

out是打包目錄

外層package.json中添加這兩個(gè)腳本

"prebuild": "cd src && npm i","build": "node electron-packager.js",

?執(zhí)行npm run build

【看效果】

在out下生成了vq-darwin-x64文件夾，vq是應(yīng)用名，darwin是macos，x64是平臺(tái)?

這個(gè)文件夾下的vq就是應(yīng)用（mac下其實(shí)就是文件夾）

右鍵vp點(diǎn)擊顯示包內(nèi)容如下

1.結(jié)構(gòu)和上面講的electron結(jié)構(gòu)一樣

2.app下的文件就是開發(fā)是src下的文件，使用到的npm包也只有一個(gè)

對(duì)比之前vscode的結(jié)構(gòu)看下，是不是很相似

以上代碼見：GitHub - insistime/electron-guides at 0.0.5

【生成圖標(biāo)】

雖然已經(jīng)生成了mac下的應(yīng)用，但是應(yīng)用圖標(biāo)是默認(rèn)electron的圖標(biāo)，感覺不能好好裝x了，

生成一個(gè)自己的圖標(biāo)，這里也比較坑，

electron官方文檔和electron-packager官方文檔都沒說明需要什么樣的圖片作為圖標(biāo)

不是常見的png，jpg，ico等，而是icns，估計(jì)是apple官方有類似規(guī)范

生成的方法見這個(gè)博客：快速生成 Mac App icns 圖標(biāo) - 簡(jiǎn)書

大概就是準(zhǔn)備1024x1024的png圖片，然后mac命令就可以搞定了

搞定后修改electron-packager打包的選項(xiàng)

看效果

?

以上代碼詳見：https://github.com/insistime/electron-guides/tree/0.0.6

【安裝包】

雖然已經(jīng)生成好了mac下的應(yīng)用，但是不方便直接發(fā)給其他人，在mac下其實(shí)就是一個(gè)文件夾，所以需要打成安裝包dmg來分發(fā)，比較簡(jiǎn)單的也可以自己zip一下發(fā)出去，但是效果就沒那么好了，哈哈~

回到electron-packager，可以看到推薦了很多相關(guān)npm包，這里使用electron-installer-dmg來生成dmg包?

安裝

npm i -D electron-installer-dmg

打包dmg代碼

// electron installer dmg var electronDMG = require('electron-installer-dmg');// pack dmg config var packdmgConfig = require('./packdmg.config.js');// dmg electronDMG(packdmgConfig, function(err){console.log(err); });

打包dmg的配置

'use strict';// path var path = require('path');// app config var appConfig = require('./app.config.js');// packmac config var packmacConfig = require('./packmac.config.js');// app env var appEnv = 'online';// app path var appPath = path.resolve(__dirname, `../${packmacConfig.out}/${appConfig.appName}-darwin-${packmacConfig.arch}/${appConfig.appName}.app`);// background var background = path.resolve(__dirname, '../static/bg.png');// packdmg config module.exports = {name : `${appConfig.appName}-${appEnv}-${appConfig.appVersion}`,appPath : appPath,icon : appConfig.appIconPath,iconSize : 80,background : background,overwrite : true,debug : false,out : path.resolve(__dirname, '../out/dmg') };

配置比較簡(jiǎn)單，主要是獲取上一步生成mac app應(yīng)用的路徑等

icon還是采用上一步生成好的icns文件

background是dmg打開后的背景圖，這里隨便找了一張圖片

package.json中加了對(duì)應(yīng)的腳本

"packdmg": "node ./pack/pack-dmg.js",

看效果

生成了dmg，雙擊后如圖

背景圖可以設(shè)計(jì)一下，類似講app拖拽進(jìn)去applications文件夾等

從生成mac app到生成dmg分幾步

1.在src文件夾下，npm i安裝好src下依賴的npm包

2.npm run packmac，生成mac下app

3.npm run packdmg，生成dmg文件

以上代碼詳見：https://github.com/insistime/electron-guides/tree/0.0.8

【總結(jié)】

1.了解electron-packager

2.了解electron應(yīng)用結(jié)構(gòu)

3.了解electron應(yīng)用開發(fā)和打包后運(yùn)行的不同

4.使用electron-packager打包一個(gè)應(yīng)用

5.electron應(yīng)用mac圖標(biāo)定制

6.使用electron-installer-dmg生成dmg安裝包

總結(jié)

以上是生活随笔為你收集整理的Electron那些事02：打包的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。