Electron的环境配置

2023-06-12,,

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

参考资料:

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

Electron的环境配置的相关教程结束。

《Electron的环境配置.doc》

下载本文的Word格式文档,以方便收藏与打印。