原文地址http://huisky.com/blog/161218121551123
本文介绍了Electron的环境配置,包括Electron下载、nodejs下载安装、NPM+Bower安装配置、app打包。
1. Electron下载
Electron - Build cross platform desktop apps with JavaScript, HTML, and CSS,即提供了一个利用JavaScript、HTML、CSS构建桌面应用的平台,实例Atom、vscode。
目github托管地址https://github.com/electron/electron
release下载https://github.com/electron/electron/releases,我的电脑是win7 64位,这里选择下载了electron-v1.3.3-win32-x64.zip.
2. nodejs下载安装
- 官方下载 msi 安装 或 下载zip手动添加路径到系统环境变量Path
- 检查是否配置成功, cmd中输入
node -v
回车执行,如果安装成功会显示版本号 - 检查npm(NPM是随同NodeJS一起安装的包管理工具) ,cmd中输入
npm -v
,如果安装成功会显示版本号
3. NPM+Bower安装配置
-
先配置npm的全局模块的存放路径以及cache的路径,例如我希望将以上两个文件夹放在NodeJS的主目录下,便在NodeJs下建立“node_global”及“node_cache”两个文件夹。我们就在cmd中键入两行命令:
npm config set prefix "C:\node\node_global"
npm config set cache "C:\node\node_cache" 设置系统变量。进入
我的电脑-属性-高级-环境变量
。在系统变量下新建“NODE_PATH”,输入C:\node\node_modules
安装bower:在cmd中键入
npm install bower -g
, -g表示全局。进入node,输入require('bower')
显示如下表示 安装成功!
安装配置参考http://jingyan.baidu.com/article/2d5afd69e243cc85a2e28efa.html
4.app打包
- 安装asar,cmd>
npm install -g asar
- 打包:cmd下cd到asar的目录,cmd>
asar pack E:\electron\resources\app E:\electron\resources\app.asar
- 包里面建议只放放html、js、css、图片这些,要存储的数据还是要放在外面;然后把app.asar复制到electron目录下的resources里面,然后直接双击electron.exe,你会发现打开的程序是你的,而不是原本默认的,还有这个asar的文件名一定是app
- 打包精简
- 更改Electron名称、icon:你可以将electron.exe改成任意你喜欢的名字,然后可以使用像 rcedit或者ResEdit编辑它的icon和其他信息
-至于asar的访问,只需要把asar包当成一个文件夹即可,如果js和html在包内部可以直接访问
外部需要使用io.js来访问
https://github.com/electron/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md