Angular+Electron+VSCode的桌面应用开发入门笔记（1）

第一部分 Electron开发入门笔记

GitHub 的 Electron 框架（以前叫做 Atom Shell）允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用。它是 io.js 运行时的衍生，专注于桌面应用而不是 web 服务端。Electron 丰富的原生 API 使我们能够在页面中直接使用 JavaScript 获取原生的内容。

本文学习的主要知识来自 【译】使用 AngularJS 和 Electron 构建桌面应用 https://segmentfault.com/a/1190000004202948

---

一、基础环境的搭建

为了安装相应的开发环境和运行库，首先需要安装以下两个东西：
1、安装Nodejs和npm包管理器
2、安装Bower（Web开发包管理器）
3、代码编辑器（Visual Studio Code）

本文学习测试的环境为Windows 10。

（一）Nodejs和npm包管理器安装

到NodeJs官方网站http://www.nodejs.org，下载相应平台的安装包，我在下windows x64平台的安装包，并按提示安装完毕。NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。

通过输入”node -v” 和”npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

---

（二）Web开发包管理器Bower的安装

按照Bower官方网站的描述：
Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.

来自 http://bower.io

Bower能够为我们安装和管理Web开发所需要的框架、库、资源和实用工具。Bower的安装方法：
利用npm来全局安装bower，npm的全局安装参数为 “-g”；

$ npm install -g bower

来自 http://bower.io

（三）编辑器Visual Studio Code（以下简称：VSCode） 的安装

通过https://www.visualstudio.com/下载for Windows版Visual Studio Code。并按提示安装完毕。

二、创建一个Electron应用

创建一个Electron应用的所有步骤：

1. 创建一个项目文件夹；
2. 在CMD命令行窗口中，进入该项目文件夹，通过npm init命令创建Electron应用所需的package.json文件；
3. 在项目文件夹下，通过npm install –save-dev electron-prebuilt命令安装项目所需的Electron环境；
4. 在VSCode中创建启动 JS 脚本文件；
5. 在VSCode中创建一个入口HTML页面；
6. 运行该项目，查看效果；
7. 将项目的运行命令与VSCode编辑器整合。
8. 配置调试环境

（一）创建项目文件夹

创建一个项目文件夹，例如：AE_Sample，并在其下创建一个app目录，app目录主要用于存放你编写的代码，将代码和运行调试相关的环境和第三方包区分开来，便于项目的维护。

需要注意以下两个问题：
1. 尽量不要使用中文目录。由于许多国外软件对中文的支持问题，使用中文经常会导致意想不到的问题；
2. 尽量不要在Windows系统保护的目录中（例如：windows、program files文件夹等）创建项目文件夹，避免因windows用户权限问题带来程序异常。

（二）创建并初始化package.json文件

package.json文件是基于NodeJS项目开发和npm包管理的一个配置文件，该配置文件包含了：开发环境的依赖、构建脚本、程序清单、项目入口、项目信息等信息。npm包的安装需要该文件，基于NodeJS的项目同样也需要该文件来运行项目。

可以通过两种方式创建package.json文件：

1. 通过VSCode直接创建并编辑package.json文件。

该文件常规至少应该配置以下内容（特别是name和version项是必须的）：

{
    name: "xxxx", //项目名称（名称不能包含大写字母）
    version: "x.x.x", //项目版本
    main: "xxxx.js" //项目入口脚本
}  

想了解更多请参考《package.json for NPM 文件详解》。

2. 通过npm init来引导你创建一个package.json文件。

通常我们在创建一个NPM程序时，可以使用npm init命令，通过交互式的命令，自动生成一个package.json文件，里面包含了常用的一些字段信息，但远不止这么简单。通过完善package.json文件，我们可以让npm命令更好地为我们服务。

在CMD中运行npm init命令后，它会项提示你输入相应的配置信息，如果你不想输入，可以直接按Enter回车，它会自动采用默认值，默认值在某些项后面的括弧中有提示，可以供你参考，但是如果你的项目文件夹如果采用了大写字符，直接按回车也会出错，提示错误为：Sorry, name can no longer contain capital letters.，因为name项的默认值是你的项目文件夹名称，而name不允许包含大写字母，所以会出现此错误。可以采用下划线“_”来分割名称。
具体命令操作如下图：

如果该项目不授权给其他人使用，可以在license项输入：UNLICENSED，如果不输入，系统将默认采用 ISC 许可。Package.json的其他配置内容也可以参考官方说明文件。输入完成后，直接按Enter回车，就可以创建package.json文件，生成的文件内容如下：

{
    "name": "ae_sample", 
    "version": "1.0.0", 
    "description": "", 
    "main": "./app/main.js", 
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    }, 
    "author": "", 
    "license": "UNLICENSED"
}

3、安装Electron依赖环境

Cmd进入项目文件下，运行命令：

npm install –save-dev electron-prebuilt

安装项目所需的Electron环境，安装完毕后，package.json文件会自动最追依赖选项的配置参数。
这里注意一下：npm install下载有时很困难，经常在下载环节卡住，无法完成包安装进程，因此建议采用以下方法加快npm的下载速度：

以下摘自《加快npm的下载速度》

首先，我们的npm包无所谓安全性，所以不要使用性能和效率更慢的https，转而使用http，相关命令如下：

(1)、关闭npm的https

npm config set strict-ssl false

(2)、设置npm的获取地址

npm config set registry “http://registry.npmjs.org/”

一般这样运气的好的话，速度就会快许多，可能会安装成功。如果你还脸黑，这样设置还是一直卡住无法下载依赖，那就只能使用proxy代理方式来解决了，命令如下：

(3)、设置npm获取的代理服务器地址：

npm config set proxy=http://代理服务器ip:代理服务器端口

清除npm的代理命令如下：

**npm config delete http-proxy
npm config delete https-proxy **

也可以单独为这次npm下载定义代理

npm install -g pomelo –proxy http://代理服务器ip:代理服务器端口

安装过程出现的 npm WARN package.json 提示，不必管它，这些提示说的是 package.json 文件缺少一些配置项，但这些配置项并不影响你安装Electron环境。

安装完成后，项目文件夹中多了一个 node_modules 文件夹，我的电脑已经在全局或其他项目中安装过