关于Electron的环境搭建（附带npm，git的初步接触体验）

新人一个，刚刚接触js，html，css，并幸运的找到了一个能够包容我的公司。

目前只是能够简单的制作一些前端界面，还没有参与过svn这种大型团队项目当中，所以虽然听说过这个东西，但是却没有实际接触过。

这周公司领导让我接触Electron，我上网搜索了一下，并成功的把这个玩意弄到了电脑当中，在翻了很多的博客和各位前辈们的文后，总算是艰难的跑出了第一个例子。

在这里附上我在搭配Electron环境时候遇见的一些坎坷，仅供那些可能接下来会接触Electron新人们一些参考。

1.首先我们需要知道，Electron是个什么东西：

w3c上面是这样说的：Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。 这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。 
反正我是不太懂，我的理解就是可以使用Electron，来间接利用js等工具，开发桌面应用，也就是app。

 

 2.搭建本机Electron的开发环境：

重点，这部分内容遇见的坑比较多。我尽量写得详细一些。

首先是下载node.js，这个步骤很简单，百度一下，然后进入官网下载适合本机的版本，比如64位window，就下载对应的windows版本。

下载之后就是安装nodejs，这部也很简单，没遇见什么坑。但是接下来有一个非常重要的东西，需要安装。那就是npm！

npm：借用一下其他前辈的总结。

npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

npm的初衷：JavaScript开发人员更容易分享和重用代码。

npm的使用场景：

• 允许用户获取第三方包并使用。
• 允许用户将自己编写的包或命令行程序进行发布分享。

npm版本查询：npm -v 

npm安装：

　　1、安装nodejs

　　　　由于新版的nodejs已经集成了npm，所以可直接通过输入npm -v来测试是否成功安装。

　　2、使用npm命令来升级npm: npm install npm -g

也就是说，如果想要下载electron，那必须要借助npm之手。而npm在国内的运行速度比较慢，所以各位前辈推荐了cnpm这种工具。

cnpm：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

简单来说，这就是等于国内版的npm，而且功能基本一致，同步频率对你的影响基本不大。

安装cnpm的方式非常简单，只要在你的电脑安装了新版本的nodejs，在cmd当中，就可以使用npm的指令。所以只要复制这么一行代码即可。

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

这样你就可以快速的使用cnpm在下载electron模块了。

如果你完成了这一步，在cmd的窗口当中，都可以查到安装的版本信息。node -v ，npm -v ，cnpm -v

完成这一步之后，基本上就搞定一半了，接下来只要在弄一个git项目管理，然后有一个ide来操作electron就可以了。

这里简单介绍一下git项目管理工具，这东西我也是第一次接触，啥东西都有第一次嘛，所以我也是很好奇这是干嘛的，因为跟github很像，所以在接触的时候我就猜到应该有关系。

至于这具体是个啥，大家可以搜索一下百度百科，讲的比我明白多了，总之我们用git的地方，就是用他来从github当中下载第三方的例子。

git的安装方法在网上很容易搜得到，这里就不多提了，大家只要一搜索就找得到。

而ide的话，我比较推荐用vscode，因为这个真的很友好，对于新人刚接触来说，他不会像是atom那样下限很高，上限同样很高，也就是说如果是新人用atom很容易蒙圈，虽然它可以定制自己的ide但是新人什么都不懂，你让他怎么定制，反而是vscode很友好，他会把一些常用的东西全都给你配备好，你完全不用担心怎么去配置。

搞定git和ide之后，就可以下载electron了。

使用cnpm install electron --save-dev --save-exact，在cmd当中下载electron模块，下载完毕后，同样可以使用，electron -v来检查是否安装成功。

显示这个之后，你就可以在vscode当中，来创建你的第一个例子了。

这里推荐的是：

这位前辈的例子，只要在vscode当中，粘贴这段：git clone https://github.com/electron/electron-quick-start

即可下载这个hello Word例子。

输入上面粘贴后的地址后，会在你的vscode当中出现这么一个文件夹。

这就说明，你已经成功从GitHub下载了这个例子，这就是目前在我看来git的用处。

然后按照上面的例子，我们先进入例子的终端当中。

具体就是上图的操作，右键那个文件夹，然后再终端打开，这样就不用再cd 进入例子的文件夹当中了。在终端你就会出现这个显示。

接下来就依次输入，npm install，下载依赖，npm start 就可以跑你的第一个helloword例子啦。

 

3.关于16年的那个声效器的例子，具体地址在：https://zhuanlan.zhihu.com/p/20225295?columnSlug=FrontendMagazine

这个例子的年代太远了，你就算下下来，以我们的水平也是无法跑的动的，会不断的报错，根本原因是因为electron的不算迭代，很多的api都发生了改变。还挺打击人的，我捯饬了一下午都没有跑出来，最后还是利用git base才尝试成功的。

也就是这个东西，使用它可以成功的跑那个老版本的例子，但是作用不大，不是很推荐各位新人去再跑这个例子了。

当然你们要是感兴趣的话，我倒是可以给你们写一下是怎么成功跑出来的，虽然我也不知道是什么原理。但是却可以让你们体验一下哈哈哈哈。

好了文章就到这了，接下来我也会每天抽出下班时间的百分之20左右，来学习electron，用我们老大的话就是，多看文档！好的我知道了，我还打算学习英文，好好学英文的重要性我终于体会到了，什么文档都看不懂简直让人崩溃~