electron教程（四）：使⽤electron-builder或electron-pac。。electron vue教程
。
我的electron教程系列
引⾔
本篇将介绍如何将你开发的electron项⽬(main.js), 打包成⼀个可执⾏桌⾯程序(.exe).
有两个流⾏的⼯具可以做到这⼀点: electron-builder和electron-packager.
我不会详细地对⽐两者的优劣, 但会通过三个事实来帮助你选择合适的⼯具.
1. electron-builder的Star为7.7k, electron-packager的Star为6.6k.
2. 根据electron-builder的作者介绍, electron-builder打包后会⽐electron-packager更⼩, 还可以通过捐款来让作者优先帮你解决问题.
3. electron-builder不⽀持node原⽣模块和⼆进制模块, 所有这类型的模块在打包的过程中, 都会经历⼀次electron-rebuild, 被编译成electron模块. 这个机制引⼊了⼀些问题: 某些模块⽆法通过electron-rebuild编
译, 就是其中之⼀, 所以如果你的项⽬想要通过引⼊ffi-napi来使⽤C++的dll, 就只能选
择electron-packager进⾏打包了.
electron-packager
1. 部署node.js+electron环境
按步骤完成所介绍的内容.
2. 安装electron-packager
执⾏指令:
yarn add electron-packager --save-dev
3. 在package.json中添加打包脚本
//FIXME todo：因为我优化了项⽬⽬录, 把main.js和其他js移动到了src⽂件夹中, index.html及lib移动到了html中, 所以脚本中的⽬录可能需要⼀些修改
在package.json中的scripts中, 添加如下内容:
"packager": "electron-packager ./ testapp --win --out ./outputs"
如图所⽰:
你可以在上查该脚本⽀持的所有的参数.
4. 打包
执⾏指令:
npm run packager
如果顺利的话, 会出现打包成功的提⽰, 项⽬的根⽬录下出现outputs⽬录, 该⽬录下有testapp-win32-x64⽬录, 此⽬录下有若⼲⽂件, 包
括可执⾏程序.
注:
* outputs⽬录的名字是我们在packager脚本中指定的
* testapp-win32-x64的名字是因为我们指定了⽣成win平台下的程序, 如果你指定⽣成linux和mac平台下, 就会出现针对该平台的⽬录.
* 同样是我们在packager脚本中指定的名字
4.1. 打包过程中会遇到的问题
第⼀次执⾏打包指令的时候, 会⾮常⾮常的慢, 甚⾄可能会失败, 通常的原因如下:
下载速度太慢
electron-packager在当前机器的⾸次打包的时候，会下载electron的预编译⽂件⾄当前⽤户⽬录，⽽electron-prebuilder的默认源在国外，在⽹络不好的情况下，即便有代理，速度也会⾮常慢。
可选的⽅案如下:
* 使⽤代理
* 更换阿⾥镜像源 (成功率不⾼)
在执⾏打包脚本前, 先执⾏指令, 指定从阿⾥的镜像源来下载electron预编译⽂件:
npm config set ELECTRON_MIRROR /mirrors/electron/
* 使⽤cnpm (成功率较⾼, 但会引发别的问题, 如下)
⽤下⾯的指令替换npm run packager:
cnpm run packager
* cnpm导致⽂件过⼤
如果你在项⽬构建过程中, 是通过cnpm来安装模块的, 会导致你项⽬中的node_muduoles体积⾮常⼤.
使⽤cnpm安装模块, 会导致所有的包都是扁平化的安装, node_modules中会有⾮常多的⽂件, 直接导致了electron-packager打包⾮常的慢.
⽽npm和yarn安装时, 所有的包都是树状解构的, 层级变深, 但是打包速度会快很多.
如果你已经使⽤cnpm安装过某些模块, 建议你删除这些模块, 以及这些模块的依赖, 重新使⽤npm和yarn安装.
⼀个技巧可以帮你快速完成上述步骤:
将项⽬根⽬录的node_modules彻底删除, 然后执⾏指令:
yarn install
该指令会读取项⽬⽬录下package.json中的devDependencies和dependencies中的内容(也就是你之前安装过的全部模块), ⼀次性重新安装.
注:
某些模块⽆法通过yarn安装, ⽐如ffi-napi, 如果你希望删除node_modules后利⽤package.json重新安装, 按照如下步骤即可:
1. 删除⽆法yarn的模块: 在package.json中, 将ffi-napi的内容删除.
2. yarn安装其他模块: 通过yarn install先安装其他模块.
3. ⼿动安装该模块: 执⾏npm i ffi-napi重新安装ffi-napi.
electron-builder
注:
因为我⾃⼰的项⽬中, 使⽤了ffi-napi. 所以我只能选择electron-packager作为打包⼯具.
在这⾥electron-builder只是简单的介绍了使⽤流程, 如果你在使⽤中遇到了什么问题, 可以参考electron-packager中的解决⽅案, 或者留⾔告诉我.
1. 部署node.js+electron环境
2. 安装electron-builder
执⾏指令:
yarn add electron-builder --save-dev
3. 在package.json中添加打包脚本在package.json中, 添加如下内容:
"build": {
"appId": " your.id ",
"mac": {
"category": " your.pe "
}
},
在scripts中, 添加如下内容:
"pack": " electron-builder --dir ",
"dist": " electron-builder --win --x64",
"postinstall": "electron-builder install-app-deps"
如下图所⽰:
4. 打包
执⾏命令, 编译:
yarn postinstall
再执⾏命令, 打包:
yarn dist

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。