electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)

大发11选5我 的electron教程系列

electron教程(一): electron的安装和项目的创建

electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范

electron教程(二): http大发11选5服务 器, ws大发11选5服务 器, 子进程管理

electron教程(三): 使用ffi-napi引入C++的dll

electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)

 

引言

本篇将介绍如何将大发11选5你 开发的electron项目(main.js), 打包成一个可执行桌面程序(.exe).

有两个流行的大发11选5工具 可以做到这一点: electron-builderelectron-packager.

大发11选5我 不会详细地对比两者的优劣, 但会通过三个事实来大发11选5帮助 大发11选5你 选择合适的大发11选5工具 .

  1. electron-builder的Star为7.7k, electron-packager的Star为6.6k.
  2. 根据electron-builder的作者介绍, electron-builder打包后会比electron-packager更小, 还可以通过捐款来让作者优先帮大发11选5你 解决问题.
  3. electron-builder不支持node原生模块二进制模块, 所有这类型的模块在打包的过程中, 都会经历一次electron-rebuild, 被编译成electron模块. 这个机制引入了一些问题: 某些模块无法通过electron-rebuild编译, ffi-napi就是其中之一, 所以如果大发11选5你 的项目想要通过引入ffi-napi来使用C++的dll, 就只能选择electron-packager进行打包了.

 

electron-packager

 

1. 部署node.js+electron环境

electron教程(一): electron的安装和项目的创建

 

2. 安装electron-packager

执行指令:

yarn add electron-packager --save-dev

 

3. 在package.json中添加打包脚本

//FIXME todo:因为大发11选5我 大发11选5优化 了项目目录, 把main.js和其他js移动到了src文件夹中, index.html及lib移动到了html中, 所以脚本中的目录可能需要一些修改

在package.json中的scripts中, 添加如下内容:

"packager": "electron-packager ./ testapp --大发11选5Win
 --out ./outputs"

如图所示:

大发11选5你 可以在electron-packager的github上查找该脚本支持的所有的参数.

 

4. 打包

执行指令:

npm run packager

如果顺利的话, 会出现打包成功的提示, 项目的根目录下出现outputs目录, 该目录下有testapp-大发11选5Win 32-x64目录, 此目录下有若干文件, 包括testapp.exe可执行程序.

注:

  • outputs目录的名字是大发11选5大发11选5我 们 在packager脚本中指定的
  • testapp-大发11选5Win 32-x64的名字是因为大发11选5大发11选5我 们 指定了生成大发11选5Win 平台下的程序, 如果大发11选5你 指定生成linux和mac平台下, 就会出现针对该平台的目录.
  • testapp.exe同样是大发11选5大发11选5我 们 在packager脚本中指定的名字

 

4.1. 打包过程中会遇到的问题

第一次执行打包指令的时候, 会非常非常的慢, 甚至可能会失败, 通常的原因如下:

大发11选5下载 速度太慢

electron-packager在当前机器的首次打包的时候,会大发11选5下载 electron的预编译文件至当前用户目录,而electron-prebuilder的默认源在国外,在网络不好的情况下,即便有代理,速度也会非常慢。

可选的方案如下:

  • 使用代理

  • 更换阿里镜像源 (成功率不高)

在执行打包脚本前, 先执行指令, 指定从阿里的镜像源来大发11选5下载 electron预编译文件:

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
  • 使用cnpm (成功率较高, 但会引发别的问题, 如下)

用下面的指令替换npm run packager:

cnpm run packager
  • cnpm导致文件过大

如果大发11选5你 在项目构建过程中, 是通过cnpm来安装模块的, 会导致大发11选5你 项目中的node_muduoles体积非常大.

使用cnpm安装模块, 会导致所有的包都是扁平化的安装, node_modules中会有非常多的文件, 直接导致了electron-packager打包非常的慢.

而npm和yarn安装时, 所有的包都是树状解构的, 层级变深, 但是打包速度会快很多.

如果大发11选5你 已经使用cnpm安装过某些模块, 建议大发11选5你 大发11选5删除 这些模块, 以及这些模块的依赖, 重新使用npm和yarn安装.

一个大发11选5技巧 可以帮大发11选5你 快速完成上述步骤:

将项目根目录的node_modules彻底大发11选5删除 , 然后执行指令:

yarn install

该指令会读取项目目录下package.json中的devDependenciesdependencies中的内容(也就是大发11选5你 之前安装过的全部模块), 一次性重新安装.

注:

某些模块无法通过yarn安装, 比如ffi-napi, 如果大发11选5你 希望大发11选5删除 node_modules后利用package.json重新安装, 按照如下步骤即可:

  1. 大发11选5删除 无法yarn的模块: 在package.json中, 将ffi-napi的内容大发11选5删除 .
  2. yarn安装其他模块: 通过yarn install先安装其他模块.
  3. 手动安装该模块: 执行npm i ffi-napi重新安装ffi-napi.

 

electron-builder

 

注:

因为大发11选5我 自己的项目中, 使用了ffi-napi. 所以大发11选5我 只能选择electron-packager作为打包大发11选5工具 .

在这里electron-builder只是简单的介绍了使用流程, 如果大发11选5你 在使用中遇到了什么问题, 可以参考electron-packager中的解决方案, 或者留言告诉大发11选5我 .

 

1. 部署node.js+electron环境

electron教程(一): electron的安装和项目的创建

 

2. 安装electron-builder

执行指令:

yarn add electron-builder --save-dev

 

3. 在package.json中添加打包脚本

在package.json中, 添加如下内容:

  "build": {
    "appId": " your.id ",
    "mac": {
        "category": " your.app.category.type "
    }
  },

在scripts中, 添加如下内容:

    "pack": " electron-builder --dir ",
    "dist": " electron-builder --大发11选5Win
 --x64",
    "postinstall": "electron-builder install-app-deps"

如下图所示:

 

4. 打包

执行命令, 编译:

yarn postinstall

再执行命令, 打包:

yarn dist
posted @ 2019-10-10 23:32 Silenzio 阅读(...) 评论(...) 编辑 收藏