electron的艰难安装之旅

最近对前端开发很感兴趣，抽空研究了下前段的开发工具，发现比较流行的是sublime,atom,vscode等，

由于一直以来从事.net开发所以对vscode很感兴趣，在vscode的安装配置过程偶然发现巨头微软的vscode

是采用electron为基础开发的，瞬间被震住了，以前不关注前端，虽然知道微软的发布了一款轻量级的编辑器

却没觉得有多大用处，甚至觉得没有visual studio好用，了解前端开发之后猛然觉得这是一款高大上的前端ID E，

加上对史称最强大友好的visual studio的好感，觉得vscode一定会继承visual studio的优良基因，于是一番折腾

安装配置，期间对于electron很是好奇，百度一下，原来electron是基于大名鼎鼎的node.js而来的，electron让我们

使用javascript,html5,css3开发富交互桌面应用变得轻松，重要的是通过electron我们可以使用javascript完成对

本地操作系统接口的调用，这对于以前搞前端应用开发动不动要搞一个activex插件来完成本地设备的调用这种扯淡而又

兼容性不好的解决方案来说，简直是逆天了，由于electron基于node,Chromium,v8,使得前端开发中经常遇到的浏览器

兼容性问题彻底消失，可以说这是桌面应用程序的春天，基于electron的桌面程序，兼容性好，可以利用前端技能，又可以

跨平台，UI部分可以充分利用现有的web前端应用框架，可以说是一举多得。

言归正传，扯了这么多，其实就是对electron是如何工作的很好奇，想自己动手试试。

一、由于electron是基于nodejs的，所以我们首先要安装nodejs

nodejs安装比较简单，国内可以直接访问官网 https://nodejs.org/en/

然后下载安装最新的版本即可，在此不在赘述。

安装完成之后打开命令行工具，输入node -v,npm -v,可以看到如下显示，说明node安装成功。

（npm是node的模块管理工具，由node附带安装）

由于nodejs,electron比较流行，所以可以在网上找到很多教程，在此列出一篇来自知乎的入门教程

https://zhuanlan.zhihu.com/p/20225295?columnSlug=FrontendMagazine

本人按照上面的教程一步一步操作，本以为可以顺利启动，谁知道中间遇到了个大坑，耗费了整整一天多的

时间才把问题解决。下面详细说明一下问题的来龙去脉，以供大家参考。

由于现在代码托管仓库流行git,尤其是开源的项目，需要大家自行安装配置一下git才能按照上面的教程

一步一步实践，git安装配置比较简单，网上教程多，坑少，自己解决。

二、关键一步是从git克隆代码到本地之后

git clone https://github.com/bojzi/sound-machine-electron-guide.git

由于该演示程序是关于electron的，所以启动的时候需要依赖electron，所以需要先安装依赖，
基于electron的项目的根目录下有一个package.json的文件，它描述了项目启动的依赖模块，所以在
启动之前我们需要运行npm install命令来安装依赖模块，其实就是安装electron,虽然可以从淘宝镜像
获取electron的最新zip包，但是解压了不知道如何是好，没法和基于electron的应用结合起来（主要是初次接触不了解所致），
只能安装教程一步一步操作，当在sound-machine-electron-guide目录下执行npm install命令后，等待好久最后报

npm ERR! network connect ETIMEDOUT
npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settin
gs.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

npm ERR! Please include the following file with any support request:
npm ERR! C:\Program Files\nodejs\npm-debug.log

类似上面的异常，有时候报192.30.253.113：443异常，总之经过搜索N多次之后才发现到底还是网络的原因。
中间设置过代理，
npm config set proxy http://server:port
npm config set https-proxy http://server:port

后来又改回去了，还修改过hosts文件

尝试过好多其他的方法，都不行

真是踏破铁血无觅处，得来全不费工夫，误打误撞发现了一篇博文

https://segmentfault.com/a/1190000007903823

根据里面的介绍明白了，直接访问国外的服务器太慢，可以使用

npm install cnpm -g --registry=http://registry.npm.taobao.org

命令先安装淘宝镜像的包命令行管理工具cnpm,然后再安装

cnpm install electron -g

即可快速完成安装，注意上面的npm install cnpm -g --registry=http://registry.npm.taobao.org

在执行的时候有时候比较慢，需要耐心等待完成之后再进行下一步，我差点没等住就把窗口关闭了。

也可以cnpm install直接安装当前目录下的应用的依赖包，待安装完成之后

执行 cnpm start即可启动基于electron的应用程序。如下图所示：

至此，一个简单的入门程序算是跑起来了，接下啦就可以自己学习研究如何基于此开发属于自己的桌面web程序了。

上面是electron官网提供的demo程序，下面是知乎入门教程https://zhuanlan.zhihu.com/p/20225295?columnSlug=FrontendMagazine

的demo程序启动之后的画面

大家可以参考学习一下，看似一个简单的程序，真正动起手来不是那么容易就搞定的，一定要多实践才是。

标签: electron

转载于:https://www.cnblogs.com/xiaocongcong888/p/9385114.html