【打包】

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

簡單介紹了electron，以及使用electron做了一個桌面應用demo，

相信大家現在最想做的事情就是將桌面應用打包后發給其他人體驗，本節開始electron打包

【electron-packager】

官方推薦的打包工具有3個

幾個工具的區別后續單獨寫一篇文章介紹，

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

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

【查看electron應用內容】

講打包前需要先說一下用electron開發的應用的大體結構，

就拿vscode來說吧，找到vscode后右鍵點擊顯示包內容，

可以看到包內容如下

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

凡是Contents/Resources/app這類型目錄結構，十有八九是electron應用，

且app文件夾下是你主要是的代碼，resources外的是系統層級的代碼，

也就是說不管你用electron開發多少個應用，resources內的部分會不同，resources外的大體相同?

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

【開發和打包的不同】

講了electron應用大概的目錄結構，下面要說一下開發時應用跑起來和打包后應用跑起來的不同

開發時，拿上一節的代碼為例，紅框了幾個重點

1.左側紅框內的文件，是你應用跑起來的實際代碼，

上面示例和是代碼項目其他文件同一層級的，有一些混淆，就是你應用中真正有用的是左側紅框內的代碼

2.本地開發是應用跑起來的原理

執行npm start，也就是npm run start

等同于執行electron .

electron會在.（當前目錄）去找package.json中的main屬性，值為main.js，這個是入口

然后和main.js關聯的index.html，preload.js，util/menu.js對應的運行起來

3.為什么開發時electron在devDependencies內

大家有沒有注意到electron的npm包是在devDependencies內，而不是在dependencies內，

是因為electron并不是你應用打包后運行依賴的npm包?

應用打包時通過打包工具將electron環境打到包內，提供electron的環境

所以electron這個npm包放到devDependencies內，完全是為了你本地開發的時候有electron環境

這個還是比較重要的一點，可以多理解下

4.那么問題來了

那么可以看到上圖代碼，其實是“開發環境各文件”和“electron應用實際代碼”的混合，

目前這個代碼結構不合理，就是一個demo，但是實際中可能發布后的應用也是這種結構。。

【拆分代碼】

1.將上述electron應用實際代碼拆分到src文件夾下

2.為electron應用定制了一個package.json，

3.這個package.json的name和外層的不同，可以理解為你應用最終的名字

4.這個package.json中有dependencies，這個是electron應用實際以來的npm包

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

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

【electron-packager打包】

electron-packager的打包也比較簡單，詳見：Options | electron-packager?

代碼如下

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

dir是源文件的目錄

out是打包目錄

外層package.json中添加這兩個腳本

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

?執行npm run build

【看效果】

在out下生成了vq-darwin-x64文件夾，vq是應用名，darwin是macos，x64是平臺?

這個文件夾下的vq就是應用（mac下其實就是文件夾）

右鍵vp點擊顯示包內容如下

1.結構和上面講的electron結構一樣

2.app下的文件就是開發是src下的文件，使用到的npm包也只有一個

對比之前vscode的結構看下，是不是很相似

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

【生成圖標】

雖然已經生成了mac下的應用，但是應用圖標是默認electron的圖標，感覺不能好好裝x了，

生成一個自己的圖標，這里也比較坑，

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

不是常見的png，jpg，ico等，而是icns，估計是apple官方有類似規范

生成的方法見這個博客：快速生成 Mac App icns 圖標 - 簡書

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

搞定后修改electron-packager打包的選項

看效果

?

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

【安裝包】

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

回到electron-packager，可以看到推薦了很多相關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') };

配置比較簡單，主要是獲取上一步生成mac app應用的路徑等

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

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

package.json中加了對應的腳本

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

看效果

生成了dmg，雙擊后如圖

背景圖可以設計一下，類似講app拖拽進去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

【總結】

1.了解electron-packager

2.了解electron應用結構

3.了解electron應用開發和打包后運行的不同

4.使用electron-packager打包一個應用

5.electron應用mac圖標定制

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。