Electron的环境配置

时间:2022-03-07 17:16:31

原文地址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

参考资料: