electron 完整项目构建过程

前段时间因为项目需要,简单了解了一下electron,加入了electron的开发群组,偶尔能在群里帮助小伙伴解决一些问题,觉得很开心。
但同时也发现小伙伴们的问题有几个比较常见,而官方文档又比较生涩且没有例子可参考,因此抽出时间整理了一篇文章,希望能够帮助入坑的小伙伴!

##0、说在前
项目:官网electron-quick-start项目

项目使用环境:win7 64位

使用命令:npm

依赖:Node.js

特别鸣谢:本文中大量引用官网、程序如此灵动网站、CSDN博文、简书博文等,感谢这些文章的作者。在参考文档中给出了这些引用的原文链接。

1、构建electron项目

下载electron-quick-start(该博文全部使用npm,所以需要安装node,安装过程自行百度)

并执行该项目

# Clone the Quick Start repository
git clone https://github.com/atom/electron-quick-start

# Install the dependencies and run
npm install && npm start

命令执行结果如下:

这里写图片描述
这里写图片描述
这里写图片描述

注意:

1、除了使用上述命令下载electron-quick-start项目代码外,还可以直接到GitHub上下载该项目。

2、下载下来的electron-quick-start项目的package.json文件中的electron版本可能已经过时了,此时在执行npm install&&npm start时会报错。
错误类似如下:
	Downloading electron-v0.34.3-win32-ia32.zip
	Error: read ECONNRESET
这个错误说明两个问题:1)需要升级electron;2)网络连接问题
所以针对上述两个问题可以做如下处理:
	1)先说网络问题
	解决办法:更换源为淘宝
	更换方法:执行如下两条命令(更多信息可查看参考文档《开发electron程序的npm准备工作》)
		npm config set registry https://registry.npm.taobao.org/
		npm config set electron_mirror http://npm.taobao.org/mirrors/electron/
	2)升级electron,有两种方法:
		一个是忽略,网络连接成功后,会在执行 npm install && npm start后会自动升级;
		二是手动执行 npm install electron --save-dev
3、特别提示,这些命令都需要在文件当前路径下执行

至此,简单的demo就算运行出来了。

2、打包

对electron项目打包方法有很多,常用的有两种:electron-packager和electron-builder
这些打包方法都需要根据项目中的package.json文件进行。字段全解可以参考package.json字段全解。下面在具体介绍两种方法时也会有修改,请注意。

electron-packager

下面的仅仅是个范例,不能保证和你的实际情况相吻合。

electron-packager . --overwrite --platform=darwin --arch=x64 --out=out --icon=assets/app-icon/mac/app.icns --osx-sign.identity='Developer ID Application: GitHub' --extend-info=assets/mac/info.plist

electron-packager . --overwrite --platform=win32 --arch=ia32 --out=out --icon=assets/app-icon/win/app.ico

electron-packager . --overwrite --platform=linux --arch=x64 --out=out

electron-packager 的安装(electron-packager依赖Node.js,需要提前安装好)

# for use in npm scripts
npm install electron-packager --save-dev

# for use from cli
npm install electron-packager -g

注意:上面两部操作都是必须的。

使用方法

使用方法参见上面范例中给出的三种方式。同时,可以将其放入package.json中,直接运行npm run package即可完成打包,如下

"scripts": {
    "package": "electron-packager . --platform=win32 --arch=ia32 --electron-version=1.4.15 --overwrite --ignore=node_modules --ignore=.gitignore"
},

本例中,我的系统是win7,64位,该项目version是1.0.0,打包后项目名称为helloworld,放在项目当前路径下。所以修改之后的命令如下:

"scripts": {
    "start": "electron .",
    "package":"electron-packager . helloworld --platform=win32 --arch=x64 --electron-version=1.0.0 --overwrite --ignore=node_modules --ignore=.gitignore"
  },

运行打包命令

npm run package

运行结果

这里写图片描述

在当前项目下生成一个helloworld-win32-x64的文件夹,里面有一个名为helloworld.exe的可执行文件。
这里写图片描述

至此,使用electron-packager打包项目完成。想了解更多关于electron-packager,可以阅读electron-packager常用Electron App打包工具
如果想替换icon,只需要在命令后边加上–icon=your-icon-path/app.ico即可。

electron-builder

builder的参数一般写在package.json里面,下面的仅仅是个范例,不能保证和你的实际情况相吻合。更多可参见文档electron-builderelectron-builder打包工具的最简化使用

builder --mac
builder --win
builder --linux

安装electron-builder

# for use in npm scripts
npm install electron-builder --save-dev

####修改package.json

将如下内容是放入package.json。对于build中每个属性的解读,请阅读Electron学习笔记Part3-利用Electron builder应用打包EXE。本例中,项目名称为electron-quick-start,appId使用productName

"build": {
    "productName": "electron-quick-start",
    "appId": "electron-quick-start",
    "directories": {
      "output": "build"
    },
    "files": [
      "./*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "assets/app-icon/win/app.ico"
    },
    "linux": {
      "icon": "build/icons"
    }
  }

这里需要注意两点:

1、files属性里写的是指定被打包的文件,可以忽略不需要打包的文件。根据我的文件结构,我将其改成"./*",意思是当前目录下的全部文件。
2、如果需要修改icon,将icon的路径指定到相应的目录即可。

####运行打包命令

electron-builder --win

打包过程可能会因为缺少文件或下载文件失败而报错,参照win环境,electron构建时的各种下载错误问题的解决方案进行处理。

打包结果

这里写图片描述

参考文档

electron(1)安装和使用
开发electron程序的npm准备工作
Electron构建打包
electron-packager
常用Electron App打包工具
package.json字段全解
electron-builder
electron-builder打包工具的最简化使用
Electron学习笔记Part3-利用Electron builder应用打包EXE
win环境,electron构建时的各种下载错误问题的解决方案

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页