Electron安装及打包exe

心已赠人 2022-01-22 10:13 770阅读 0赞

### 文章目录 ###

*   *  一、安装node.js
     *  二、安装淘宝镜像的包命令行管理工具cnpm
     *  三、全局安装electron
     *  四、安装git
     *  五、快速上手electron
     *  六、使用electron-packager打包成exe
     *   *   *  1. 全局安装打包神器electron-packager
             *  2. 开始打包
             *   *  (1) 最简打包
                 *  (2) 直接在命令中设置参数打包
                 *  (3) 在package.json文件中配置参数打包
                 *  (4) 还可以使用asar对resources文件进行简单加密
             *  3. win10 C盘中打包可能会碰到的问题

## 一、安装node.js ##

http://nodejs.cn/  
nodejs安装非常简单，废话不多说。安装完成效果：  
（npm是node的模块管理工具，由node附带安装）  
![在这里插入图片描述][20190605224511113.png]

## 二、安装淘宝镜像的包命令行管理工具cnpm ##

npm install cnpm -g --registry=http://registry.npm.taobao.org

这步巨慢，耐心。

> 貌似是另一种更换npm镜像地址的方法：https://www.jianshu.com/p/83ca29c193cd  
> 1.看一下npm仓库地址：
> 
>     npm get registry
> 
> 得到 https://registry.npmjs.org/  
> 2.替换地址
> 
>     npm config set registry http://registry.npm.taobao.org/

## 三、全局安装electron ##

cnpm install electron -g

后面反正要git clone一个项目，也不知道这一步在干啥，先不管，干就完了。

## 四、安装git ##

官网下载地址：https://git-scm.com/download/win  
官网如果下载太慢，随便下一个得了。  
安装参考：https://www.cnblogs.com/ximiaomiao/p/7140456.html  
安装基本下一步下一步就行了，安装完成后需不需要添加环境变量也不清楚，暂时不添加。  
任一文件夹或者桌面上点击右键，有下图菜单，就算安装成功了。  
![在这里插入图片描述][20190605233943859.png]

## 五、快速上手electron ##

官方提供了快速上手实例。  
找个地儿，建个文件夹，Git Bash Here，然后：

git clone https://github.com/electron/electron-quick-start
    cd electron-quick-start
    npm install
    npm start

只需要把第一行拷进去，按下回车，一切就像全自动的一样开始了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70]  
最后连npm start都给你打好了：  
![在这里插入图片描述][2019060523581627.png]  
再按一下回车，一会儿就跳出来一个窗口：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70 1]  
这就算已经启动了，文件在你刚才Git Bash Here的地方：  
![在这里插入图片描述][20190606000122480.png]

## 六、使用electron-packager打包成exe ##

> 参考地址：
> 
> 1.  [【最简单】Electron 怎么将网页打包成桌面应用（web前端页面怎么生成exe可执行文件）][Electron _web_exe]
> 2.  官网地址：[https://github.com/electron-userland/electron-packager][https_github.com_electron-userland_electron-packager]
> 3.  [electron | electron-packager打包问题汇总][electron _ electron-packager]

#### 1. 全局安装打包神器electron-packager ####

cnpm install electron-packager -g

#### 2. 开始打包 ####

##### (1) 最简打包 #####

cd到electron-quick-start文件夹，执行如下最简单的命令，即可开始打包。

electron-packager .

打包成功，在当前目录下生成一个新的文件夹，里面生成一堆文件，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70 2]  
点击其中的exe，即可启动桌面程序：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70 3]  
上面命令非常简单，使用到了一些默认配置：

*  Use the current directory for the `sourcedir`
 *  Infer the `appname` from the `productName` in `package.json`
 *  Infer the `appVersion` from the `version` in `package.json`
 *  Infer the `platform` and `arch` from the host, in this example, `darwin` platform and `x64` arch.
 *  Download the darwin x64 build of Electron 1.4.15 (and cache the downloads in `~/.electron`)
 *  Build the macOS `Foo Bar.app`
 *  Place `Foo Bar.app` in `foobar/Foo Bar-darwin-x64/` (since an out directory was not specified, it used the current working directory)

> 补充：后来又尝试打包，执行命令后总是下载当时的新版本electron-v7.1.1-win32-x64.zip，总是下载很慢，没有下载成功，尝试覆盖缓存也没有成功。  
> 发现电脑中有6.0.12版本，之前好像使用该版本成功过。  
> 在打包命令中指定electron的版本后，迅速打包成功。  
> 使用命令：`electron-packager . --electron-version=6.0.12`  
>    
> electron包下载缓慢可以尝试通过[自定义镜像和缓存][Link 1]实现。即设置从taobao镜像下载，或手动下载（需同时下载SHASUMS256.txt，并重命名追加版本号），然后覆盖缓存文件。参考[这里][Link 1]，虽然我没有测试成功。

其实有一堆参数可以配置，有两种配置方法：

##### (2) 直接在命令中设置参数打包 #####

执行命令`electron-packager --help`或者访问[官网][Link 2]查看所有可配置参数。  
**基本命令：**

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

**命令说明：**

*  sourcedir：项目源文件所在路径（唯一的必须参数）
 *  appname：项目名称（直接使用package.json文件中的name属性更方便）
 *  platform：要构建哪个平台的应用（Windows、Mac 还是 Linux）
 *  arch：决定了使用 x86 （ia32）还是 x64（x64），还是两个架构都用
 *  optional options：可选选项

**一个命令举例：**

electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules

说明：

electron-packager . 应用名称 --out 输出文件夹 --arch=x64 --overwrite --ignore=node_modules

![在这里插入图片描述][20190608003237932.png]  
效果基本同最简打包。

##### (3) 在package.json文件中配置参数打包 #####

命令较长，每次打包都需要输入很麻烦，可以把命令配置到package.json文件中scripts属性中：

"scripts": {
      "start": "electron .",
      "packager": "electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules"
    },

然后便可运行命令`cnpm run-script packager`进行打包：  
![在这里插入图片描述][20190608004247284.png]  
看效果与上面直接在命令中设置参数的方式相同，但经错误提示发现，使用这种方式时，package.json文件中的name属性不能含有中文和空格等特殊字符。

##### (4) 还可以使用asar对resources文件进行简单加密 #####

[https://newsn.net/say/electron-asar.html][https_newsn.net_say_electron-asar.html]

#### 3. win10 C盘中打包可能会碰到的问题 ####

（1）win10 C盘下打包可能会碰到较多问题，请参考这篇博客：[electron | electron-packager打包问题汇总][electron _ electron-packager]  
我是没有权限和反应慢的问题都碰到了。  
按win+X，在Windows PowerShell（管理员）窗口中执行。

（2）在win10 C盘中打包可能出现如下错误：

electron-packager : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\electron-packager.ps1，因为在此系统上禁止运
    行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
    所在位置 行:1 字符: 1
    + electron-packager .
    + ~~~~~~~~~~~~~~~~~
        + CategoryInfo          : SecurityError: (:) []，PSSecurityException
        + FullyQualifiedErrorId : UnauthorizedAccess

解决办法其实在提示中：[https://go.microsoft.com/fwlink/?LinkID=135170][https_go.microsoft.com_fwlink_LinkID_135170]  
以管理员身份运行powershell，执行：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

![在这里插入图片描述][20191016230307134.png]

[20190605224511113.png]: /images/20220122/e28e37c15911472d8c1572d884fb59c3.png
[20190605233943859.png]: /images/20220122/a72952f0510a4e63bfa0c1a82d9f7330.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70]: /images/20220122/e5c840db08554fb69c9d25902e89f4a4.png
[2019060523581627.png]: /images/20220122/2dc608b13efa448ea571ef7ecfda01f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70 1]: /images/20220122/d80240f403bb4ba09a516681c4faa2e0.png
[20190606000122480.png]: /images/20220122/17d9ba5113c1433daef4435263641bf6.png
[Electron _web_exe]: https://blog.csdn.net/a727911438/article/details/70834467?utm_source=itdadao&utm_medium=referral
[https_github.com_electron-userland_electron-packager]: https://github.com/electron-userland/electron-packager
[electron _ electron-packager]: https://blog.csdn.net/qq_36145914/article/details/100898137
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70 2]: /images/20220122/132947907da64fd09a750d1bb24a5cc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70 3]: /images/20220122/f892b4e4198d405f9a62a7885f992316.png
[Link 1]: https://electronjs.org/docs/tutorial/installation#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%95%9C%E5%83%8F%E5%92%8C%E7%BC%93%E5%AD%98
[Link 2]: https://github.com/electron-userland/electron-packager/blob/master/usage.txt
[20190608003237932.png]: /images/20220122/649f148ac7c849d48ae06117d1018497.png
[20190608004247284.png]: /images/20220122/abcc19cc7e7940c389fd830bab4a4bc4.png
[https_newsn.net_say_electron-asar.html]: https://newsn.net/say/electron-asar.html
[https_go.microsoft.com_fwlink_LinkID_135170]: https://go.microsoft.com/fwlink/?LinkID=135170
[20191016230307134.png]: /images/20220122/abfc72a2f13c44078e77578da0180c30.png