查资料的时候看到了关于web项目打包的关键词,于是乎我又忍不住职业病去搜索了一些东西……目前看来,Electronnw.js(原node-webkit)、Hex这几个能给网页打包成exe桌面应用程序,nwjsElectron基本差不多,Electron是推荐最多的,Hex看起来很古老了,居然是有道发起的,挺厉害。思考了下,还是选择了Electron,这个我也是从来没体验过,正好趁此机会来试试!走起!
以前也搜过如何把html/css/js打包成单个exe,当时技术有限也没能做到,主要是为了把自己做的资料库打包然后分享给小伙伴……因为直接能点击打开,多方便!搜了一圈大多数用C++什么的,苦于自己不会编程就放弃了……现在既然看到了,就来试试吧!

Electron是什么?

Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。嵌入Chromium和Node.js到环境中,可以创建Windows、macOS和Linux的exe应用程序。

准备工作

  • Node.js 最新版
  • 完整的web项目
  • 做好的ICO图标文件

Nodejs设置啥的早弄过就不写了,直接走下一步~

安装

安装Electron

1
npm install electron --save-dev

安装打包工具

1
npm install electron-packager -g

下载官方范例

可以下载官方的案例来练习:

1
2
3
4
5
6
7
8
// 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
// 进入项目
cd electron-quick-start
// 安装依赖
npm install
// 运行
npm start

修改下 main.jspackage.json 里面的设置
在项目 index.html<body></body> 之间添加

1
<script src="./renderer.js"></script>

输入npm start看看效果,确保能运行

命令行

1
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

参数:

命令说明
sourcedir应用程序源的基本目录
appname应用程序的名称
version打印Electron Packager和Node的版本,以及目标平台和arch,用于错误报告,并立即退出

所有平台

命令说明
all等效于–platform=all –arch=all
app-copyright应用程序版权发行
app-version应用设置的应用版本发布版本
arch架构选择,可选值: ia32, x64, armv7l, arm64, mips64el, universal(通用,可用逗号分隔)
Windows(用于x86、x86_64和arm64体系结构)win32
macOS/Mac App Store(用于x86_64,arm64和通用架构)darwinmas
Linux(适用于x86、x86_64、armv7l、arm64和mips64el架构)
asar将应用程序中的源代码打包到程序中。pass——asar使用默认配置,配置属性–asar.unpackDir=sub_dir
支持的属性包括:
- ordering: 用于文件打包的排序文件的路径
- unpack: 将文件解包到应用程序
- unpackDir: 将目录解包到应用程序
build-version应用程序生成版本
download传递给@electron/get的子选项列表。它们通过点符号指定, 例:–download.cacheRoot=/tmp/cache
支持属性:
- cacheRoot: 缓存的Electron下载目录
- mirrorOptions: 下载备选URL选项
- rejectUnauthorized: 下载时是否要求SSL证书有效,默认为true, 使用–no-download 拒绝检查
electron-version正在打包的电子版本
electron-zip-dir包含Electron ZIP文件的目录的本地路径
executable-name可执行文件的名称,无文件扩展名。默认为appname
extra-resource要复制到应用程序资源目录的文件
icon应用程序图标文件的本地路径
ignore不要打包某个文件夹。如:–ignore=node_modules 可设置–no-prune
no-deref-symlinks确保应用程序源中没有取消对符号链接的引用
no-junk不要忽略打包应用程序中的系统垃圾文件
no-prune不要删除打包应用程序中的devDependencies
out应用程序输出目录,默认为当前目录
overwrite如果平台的输出目录已经存在,则替换它,而不是跳过它
platform要构建哪个平台的应用(Windows/Mac/Linux)可选值: darwin, linux, mas, win32 (如果有多个,则以逗号分隔)
prebuilt-asar预构建asar文件的路径(asar, ignore, no-prune, 或no-deref-symlinks)
quiet不要打印信息或警告消息
tmpdir临时目录。默认为系统临时目录,使用–no tmpdir禁用使用临时目录。

仅限win/mas平台

命令说明
app-bundle-id要在应用程序plist中使用的绑定标识符
app-category-type应用程序类别类型
例如 app-category-type=public.app-category.developer-tools 将应用程序类别设置为“开发者工具”。
darwin-dark-mode-support在打包的应用程序中强制支持Mojave/10.14暗模式
extend-infoa plist file to merge into the app plist
helper-bundle-id要合并到应用程序plist的plist文件
osx-sign(仅限macOS平台)是否签署macOS应用程序包。
可使用–osx-sign自行签名以使用默认配置, 或使用其他配置
例:–osx-sign.identity=”My Name”
支持的属性包括:
- identity: 应包含运行“codesign”时要使用的标识`
- entitlements: 签名时使用的授权路径
- entitlements-inherit: “子女”权利的路径
osx-notarize(仅限macOS平台,需要–osx签名)是否对macOS应用进行公证包装。
例:–osx-notarize.appleId=”foo@example.com
支持属性包括:
- appleId: 包含你的apple ID用户名/电子邮件
- appleIdPassword: 包含提供的apple ID的密码
- appleApiKey: 包含应用商店连接API密钥
- appleApiIssuer: 包含API密钥的颁发者
protocolURL协议方案,将应用程序注册如下:
例:--protocol=myapp 将注册要打开的应用程序
URLs:myapp://path 此参数需要 --protocol-name
protocol-name通过–protocol指定的URL协议方案的描述性名称`
usage-description关于应用程序如何使用某些macOS功能的可读描述。
支持列表:
- Camera
- Microphone

仅限win32目标平台

命令说明
win32metadata用于设置嵌入到中的应用程序元数据
例:–win32metadata.CompanyName=”Company Inc.”
或 –win32metadata.ProductName=”Product”
支持属性:
- CompanyName (默认值: package.json中的名字)
- FileDescription (默认值: appname)
- OriginalFilename (默认值: renamed exe)
- ProductName (默认值: appname)
- InternalName (默认值: appname)
- requested-execution-level (user, asInvoker, or requireAdministrator)
- application-manifest

范例:

1
electron-packager mysite --platform=win32 --arch=x64 --out outsite --icon=icon.ico --app-version=0.0.1 --overwrite --ignore=node_modules 

这里遇到个坑:
出现错误提示:connect ECONNREFUSED 127.0.0.1:443
百度了下,要设置个环境变量:

1
2
变量名:ELECTRON_MIRROR:
变量值:https://cdn.npm.taobao.org/dist/electron/

或者重置registry缓存,有可能也是端口被占用,关闭正在占用的程序,或者重启电脑。

最终打包

ico图标最大尺寸是256x256,可以用Greenfish Icon Editor来绘制图标,也可以百度搜索在线转换ico的网站,直接用制作好的图片转换即可。

刚才通过electron-packager输出打包后,会在目录看到已经生成.exe文件,但是还有很多文件,我们需要再次打包整合成单个exe,这时候可以用到Inno SetupEnigma Virtual Box来进行最终打包。

我使用的是Enigma Virtual Box,直接封包完毕。原项目大小103MB,最后封装大小440MB……呃……感觉体积也太大了吧!没办法,electron打包出来就这么大……
这图啥呢…就是为了方便大家下载后双击就能点开看!!以前我看一个资料本直接点开就能看,好酷的!占用还很小,大概估计是用C++写的吧…还不如直接打包网页版让用户点html看好了,反正每个人都有浏览器哈哈哈!纯是为了折磨自己而已啊!占这么大的空间没必要啊!愤怒删了!!哼!

后记

electron最后封包会遇到错误提示,感觉npm源也不稳定啊,下次可以考虑用nw.js试试。然后我搜到有一个新项目tauri说是可以创建体积更小的桌面程序,替代electron的产物,这看来很有前景啊,如果发展不错未来或许真的可以替代electron,那就太好了!不过语言是Rust,还是有点门槛的,以后再说吧~
然后又恰巧搜到了一个项目:Nativefier——快速将网站打包成桌面程序 这个看起来不错的样子,不过感觉是将在线网站封包了下,断网了就不能访问了,这个算是另一种快捷方式……
网站打包exe之路任重道远啊,等以后大佬写个工具革新!现阶段还是洗洗睡吧~