Electron环境配置

本文介绍了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

参考资料：

• 官方中文文档
• atom-shell程序打包-裸奔的代码君
• crossplatfrom—electron入门教程-辛苦小丁