H5W3
当前位置:H5W3 > JavaScript > 正文

electron程序如何打包生成dmg安装包?

苏南大叔再次开始更新electron相关文章,本文种给大家带来的是:如何利用appdmg生成dmg安装包。在macos的世界里面,安装一个文件是非常简单的事情,并没有win下面哪些繁琐步骤。最常见的安装包格式dmg,打开就是一个简单界面,把左边的图标拖动到右边的快捷方式上就算安装完成了。对,就是这么简单。那么,对于electron生成的.app文件来说,如何才能拥有这样的安装界面呢?这就是本文所要描述的问题。

electron程序,如何利用appdmg打包生成dmg安装包?

本文测试环境:mac/appdmg0.6.0。本文特约龙套是electron-quick-start,用electron-packager打包成了.app文件,本文的任务就是把.app文件再包装成.dmg文件。本文假设您,已经利用electron-packager正确打包好了龙套项目的.app文件。位置信息是:

./electron-quick-start-darwin-x64/electron-quick-start.app

全局安装appdmg

appdmggithub页面地址如下所示,您可以找到更详细的描述内容:

electron程序,如何利用appdmg打包生成dmg安装包?

因为appdmg的角色和electron-packager的角色类似,所以苏南大叔推荐您使用-g全局安装appdmg。命令行如下:

npm install -g appdmg
electron程序,如何利用appdmg打包生成dmg安装包?

可以通过下面的命令,获得appdmg的版本号。截至到发稿,苏南大叔安装好的appdmg的版本号是0.6.0

appdmg --version
electron程序,如何利用appdmg打包生成dmg安装包?
electron程序,如何利用appdmg打包生成dmg安装包?

配置文件

对于appdmg生成.dmg文件这个事情来说,还需要一个json配置文件。苏南大叔使用的测试配置文件如下:

{
"title": "MyApp",
"icon": "icns.icns",
"background": "bg.png",
"contents": [
{ "x": 380, "y": 170, "type": "link", "path": "/Applications" },
{ "x": 200, "y": 170, "type": "file", "path": "./../electron-quick-start-darwin-x64/electron-quick-start.app" }
],
"window": {
"size": {
"width": 580,
"height": 360
}
},
"format": "UDBZ"
}

目录结构

electron-quick-start-darwin-x64的同级目录,建立一个dmg文件夹,下面放置如下相关文件。目录结构,如下图所示:

electron程序,如何利用appdmg打包生成dmg安装包?

数值设置

另外,关于上述配置文件中的坐标信息。理论上来说,是需要自己手工不断调整的。不过其实也是有规律可循的。苏南大叔总结了几条规律,仅供参考:

压缩格式

关于参数format,就是压缩格式了。这里苏南大叔没有做具体测试。因为第一个测试结构,个人就挺满意的。据说还可以format取值如下:

生成dmg命令

命令格式如下:

appdmg <json文件路径> <dmg文件路径>
electron程序,如何利用appdmg打包生成dmg安装包?

但是考虑到实际的情况,会反复生成上述.dmg文件,所以,推荐您设置命令如下:

rm -f ./dmg/test.dmg && appdmg ./dmg/dmg.json ./dmg/test.dmg

可以定义在package.json里面的script节点里面,命名为:dmg,便于使用npm run dmg执行相关命令。

使用代码生成dmg

基本姿势

如果不用命令行,而使用node代码的话,也是可以生成dmg的。基本姿势如下:

const appdmg = require('appdmg');
const ee = appdmg({ source: 'test/appdmg.json', target: 'test.dmg' });
ee.on('progress', function (info) {
// info.current is the current step
// info.total is the total number of steps
// info.type is on of 'step-begin', 'step-end'
// 'step-begin'
// info.title is the title of the current step
// 'step-end'
// info.status is one of 'ok', 'skip', 'fail'
});
ee.on('finish', function () {
// There now is a `test.dmg` file
});
ee.on('error', function (err) {
// An error occurred
});

可选方案

这里主要需要配置的就是ee对象,其实就是appdmg的实例。
方案一,传递json配置文件和dmg的路径位置。

const ee = appdmg({ source: 'test/appdmg.json', target: 'test.dmg' });

方案二,传递json配置文件的内容和dmg的路径位置。至于basepath变量,直接忽略即可。

const ee = appdmg({
target: 'test.dmg',
basepath: __dirname,
specification: {
"title": "Test Title",
// ...
}
});

执行方式

执行方式就是:

node test.js

最终成品

对于electron-quick-start这里例子来说,生成的dmg安装包的实验结果是50m左右,体积上来说,在可接受的范围内。

electron程序,如何利用appdmg打包生成dmg安装包?

在苏南大叔的这几条测试中,这个最顶端的title是没有显示的。这个issue在官方的列表中,也没看到描述,也许是苏南大叔自己的系统问题。暂无解决方案。

总结

生成dmg安装包之后,这个安装文件就会显得高大上很多。

本文地址:H5W3 » electron程序如何打包生成dmg安装包?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址