《Electron 开发》 环境配置和Helloworld

前言：

最近因为要帮别人做一个Mac和Windows平台下都使用的桌面应用，功能很简单，就是一个文本编辑器，所以大致了解了一下跨平台桌面应用开发的框架，知乎上推荐多半是 Electron 和 NW.js，其中 Electron 比较成熟的产品有：Github开发的Atom代码编辑器（已经开源）、微软的Visual Studio Code、facebook的 nuclide 和 slack等。

什么是 Electron

概述：

Electron 前称为atom shell，是从github开源项目Atom编辑器中抽离出来的，是一个能让你通过 JavaScript、HTML 和 CSS 构建桌面应用的库 。这些应用能打包到 Mac、Windows 和 Linux 电脑上运行。

组成：

Electron 结合了 Chromium、Node.js和用于调用3个操作系统本地功能的API（如打开文件窗口、通知、图标等）：

• Chromium：Google 创造的一个开源库，并用于 Google 的浏览器 Chrome；
• Node.js(Node)：一个用于在服务器运行JavaScript的工具，拥有文件系统和网络的权限；
• Native API：支持3个操作系统（Windows、Mac和Linux）的原生API库。

开发体验：

跟网页开发很相似，通过HTML和CSS搭建界面，使用Node（JavaScript）编写逻辑，就像开发一个Node应用。

环境配置：

安装 Node.js 和 npm ：

• 资源下载：
  进入Node官网，下载指定版本的安装包，这里我下载的是：node-v6.10.2-x64.msi

• 安装配置：
  直接双击下载好的安装包，按照引导完成node的安装，在环境变量中自动将安装目录添加到Path中：
  
  新版的Node.js已经集成了npm，所以无需重复安装。

• 版本查询：
  在命令行窗口中输入版号查询指令进行查询：

  node -v
  npm -v

  假如安装成功，结果如下：
  

Electron 快速起步：

• 源码：
  Electron 源码下载地址：electron

• npm切换到国内镜像：
  上面运行npm install安装项目的依赖资源的时候，出现了报错：”npm ERR！Windows_NT 6.1.7601”
  
  报错原因是：npm原本的镜像资源索取代理地址默认是国外的 https://rubygems.org/，访问受限连接超时导致报错，有两种解决方法：

  • 方法一：（并非长久之计，但可以索取到最新的资源）；
  • 方法二：将代理设置为国内的地址，使用国内的npm镜像，通常使用阿里云提供的淘宝镜像：https://npm.taobao.org/或者腾讯的镜像：https://gems.ruby-china.org/，安装package时使用代理地址：
    

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

  这里package是要安装的模块的名称，--registry用来指定镜像索取地址。

  为了不用每次安装都指定一个地址，这里我们直接安装淘宝定制的 cnpm 修改如下：

  //安装cnpm
  npm install -g cnpm --registry=https://registry.npm.taobao.org
  //使用cnpm安装package，例如electron
  cnpm install -g electron

• 通过cnpm安装electron
  看到官方的引导，开始使用要用npm安装electron-prebuilt，但是安装的时候会提示electron-prebuilt已改名为electron，而且这里我们使用的是cnpm，所以使用以下方式：

  
  # Install the `electron` command globally
  
  cnpm install -g electron
  
  # Install as a development dependency
  
  cnpm install electron --save-dev

  执行第一个安装指令会在系统盘下面的创建一个资源目录这里我的目录是：C:\Users\Administrator\.electron，该目录下多了两个文件：electron-v1.6.6-win32-x64.zip和SHASUMS256.txt-1.6.6：
  

• 起步案例：
  github上提供了一个简单的案例：electron-quick-start
  根据官方引导，使用以下指令：

  
  # Clone this repository
  
  git clone https://github.com/electron/electron-quick-start
  
  # Go into the repository
  
  cd electron-quick-start
  
  # Install dependencies
  
  cnpm install
  
  # Run the app
  
  cnpm start

  执行正常的输出如下，并弹出Helloworld窗口：

  E:\Electron\electron-quick-start-master>cnpm install
  √ Installed 1 packages
  √ Linked 146 latest versions
  √ Run 1 scripts
  Recently updated (since 2017-04-26): 4 packages (detail see file E:\Electron\ele
  ctron-quick-start-master\node_modules\.recently_updates.txt)
  √ All packages installed (154 packages installed from npm registry, used 5s, sp
  eed 137.76kB/s, json 165(247.32kB), tarball 509.67kB)
  
  E:\Electron\electron-quick-start-master>cnpm start
  
  > electron-quick-start@1.0.0 start E:\Electron\electron-quick-start-master
  > electron .
  

  

  这里展示的界面其实就是electron-quick-start目录下index.html的布局界面。

参考：

• Electron 系列教程
• Electron 的本质