700字范文 > Angular+Electron+VSCode的桌面应用

Angular+Electron+VSCode的桌面应用

时间：2021-08-28 13:30:43

转自：/yr7942793/article/details/50986696

第一部分 Electron开发入门笔记

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

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

一、基础环境的搭建

为了安装相应的开发环境和运行库，首先需要安装以下两个东西：

1、安装Nodejs和npm包管理器

2、安装Bower（Web开发包管理器）

3、代码编辑器（Visual Studio Code）

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

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

到NodeJs官方网站，下载相应平台的安装包，我在下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）的安装

通过/下载for Windows版Visual Studio Code。并按提示安装完毕。

二、创建一个Electron应用

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

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

（一）创建项目文件夹

创建一个项目文件夹，例如：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" //项目入口脚本}

12345 12345

想了解更多请参考《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" }

1234567891011 1234567891011

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 “/”
一般这样运气的好的话，速度就会快许多，可能会安装成功。如果你还脸黑，这样设置还是一直卡住无法下载依赖，那就只能使用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文件夹，我的电脑已经在全局或其他项目中安装过Electron，所以安装过程中并没有出现下载过程，这也说明，如果你的电脑已经在全局或其他项目中安装过Electron，将不再需要下载。如果需要更新已安装的包可以使用以下命令：

npm update electron-prebuilt

注意：这里有一个问题，node_modules文件夹里面的目录层级很深，所以想要删除、复制和移动这个目录，windows会直接提示无法执行这些操作，因为node_modules目录内文件的绝对路径名长度超过了windows系统规定的长度。一个比较好的办法是，利用WinRAR软件，压缩该目录时，勾选“压缩后删除原来的文件(D)”选项可以解决这一问题。如果是复制或移动node_modules目录的话也可以采用这个方法。

好了，基本环境就安装完毕了！！！

接下来我们开始创建一个Hello World！的应用程序

4、首先创建一个入口程序 main.js

进入VSCode环境，在项目的app目录下创建一个main.js文件。

main.js是应用的入口。它负责创建主窗口和处理系统事件。main.js的具体代码如下：

代码参考：Github上atom/electron项目的electron/docs/tutorial/quick-start.md 文件

// ./app/main.js//采用javascript严格模式'use strict';// 应用的控制模块const electron = require('electron'); const app = electron.app; // 创建原生浏览器窗口的模块 const BrowserWindow = electron.BrowserWindow; var mainWindow = null; // 当所有窗口都关闭的时候退出应用 app.on('window-all-closed', function () { if (process.platform != 'darwin') { app.quit(); } }); // 当 Electron 结束的时候，这个方法将会生效 // 初始化并准备创建浏览器窗口 app.on('ready', function () { // 创建浏览器窗口. mainWindow = new BrowserWindow({ width: 800, height: 600 }); // 载入应用的 index.html mainWindow.loadUrl('file://' + __dirname + '/index.html'); // 打开开发工具 // mainWindow.openDevTools(); // 窗口关闭时触发 mainWindow.on('closed', function () { // 想要取消窗口对象的引用，如果你的应用支持多窗口， // 通常你需要将所有的窗口对象存储到一个数组中， // 在这个时候你应该删除相应的元素 mainWindow = null; }); });

1234567891011121314151617181922232425262728293031323334353637383940414243 1234567891011121314151617181922232425262728293031323334353637383940414243

5、接下来我们创建一个HTML页面，所谓应用的第一个窗体。

VSCode中，在项目app目录下创建一个index.html文件。为什么文件名是index.html，因为在前面的main.js中定义的载入应用页面就是这个名字。index.html的具体代码如下：

<html><title>My First Electron App</title> <body> <h1>Hello World!</h1> <h1>你好，世界!</h1> </body> </html>

12345678 12345678

6、运行这个应用

怎么运行呢，总共有三种方法：

（1）如果全局安装了Electron，可以在项目根目录下运行：

electron .

注意：后面输入空格之后有个“.”，代表当前目录，electron会根据前面配置的package.json文件自动找到程序入口并运行。记住electron后面必须是目录名。

全局安装命令如下：

npm install -g electron-prebuilt

虽然你全局安装了electron，但是建议项目目录中仍然也安装**electron环境。

（2）如果你没有全局安装electron-prebuilt，那么你可以通过如下方法来运行应用：

“node_modules/.bin/electron” .

或

“node_modules/.bin/electron” “.”

注意：后面有“.”。

（3）可以使用gulp工具来运行应用。

为了使用gulp，你必须安装它，安装命令如下：

以下摘自《前端构建工具gulpjs的使用介绍及技巧》

首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：
npm install -g gulp
全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：
npm install gulp
如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：
npm install –save-dev gulp
这样就完成了gulp的安装。至于为什么在全局安装gulp后，还需要在项目中本地安装一次，有兴趣的可以看下stackoverflow上有人做出的回答：why-do-we-need-to-install-gulp-globally-and-locally、what-is-the-point-of-double-install-in-gulp。大体就是为了版本的灵活性，但如果没理解那也不必太去纠结这个问题，只需要知道通常我们是要这样做就行了。

安装过程截图如下：

安装gulp完毕后，就可以通过创建gulpfile.js文件来创建一个gulp task，并且将任务和Visual Studio Code编辑器相结合，利用Visual Studio Code的快捷键Ctrl + Shift + b来运行应用了。

gulpfile.js文件代码如下：

// 获取依赖var gulp = require('gulp'), childProcess = require('child_process'), electron = require('electron-prebuilt'); // 创建 gulp 任务 gulp.task('run', function () { childProcess.spawn(electron, ['.'], { stdio: 'inherit' }); });

123456789 123456789

现在我们可以在项目根目录下输入：

gulp run

来运行应用。运行结果如下：

此结果出现中文乱码，可以在index.html中加入一行解决这个问题：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

1 1

完整代码如下：

<html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My First Electron App</title> <body> <h1>Hello World!</h1> <h1>你好，世界!</h1> </body> </html>

123456789 123456789

再次运行gulp run命令，结果如下：

7、整合VSCode，利用VSCode快捷键执行项目操作。

先来检验一下，在上一节gulp的配置，是否VSCode的task能够识别到gulpfile.js中定义的run任务。

VSCode环境中，按下F1或Ctrl+Shift+p键，可调出VSCode的命令输入框，这个框内有一个 “>” 提示符，在其后可以输入命令，在这里我们输入run，并在下拉结果列表中找到Tasks：Run Task命令点击执行，随后，出现task提示，VSCode开始搜索可执行的task任务。

由于前面在gulpfile.js中定义了一个名为 “run” 的任务，片刻之后，找到了run，点击run即可运行项目，该方法与前面描述的所有项目启动方法等效。

接下来，开始配置项目，让其支持通过VSCode环境的Ctrl+Shift+b快捷键运行项目。

再次按下F1或Ctrl+Shift+p键，在命令框中输入task，并选择Tasks：Configure Task Runner，VSCode会自动为你建立一个.vscode的目录，并自动在其下创建一个tasks.json文件。这个文件已经自动完成了一些项目的配置工作，你可按照项目需要修改配置文件。下面是VSCode自动为你生成task.json文件内容：

{"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": [ "--no-color" ], "tasks": [ ] }

123456789 123456789

然后，按需修改为如下代码：

{"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": [ "--no-color" ], "tasks": [ { "taskName": "run", "args": [ ], "isBuildCommand": true } ] }

12345678910111213141516 12345678910111213141516

保存文件，现在按下Ctrl+Shift+b就可以在VSCode中直接运行项目了，而不需要你在到CMD窗口中输入命令了。

8、配置调试环境

点击VSCode左边的Debug（Ctrl+Shift+D）图形按钮，打开调试界面，再点击上当齿轮配置按钮，

并选择Node.js调试器，

系统会自动为你在.vscode目录下生成一个名为launch.json的文件。文件代码如下：

{"version": "0.2.0", "configurations": [ { "name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}\\app\\main.js", "stopOnEntry": false, "args": [ ], "cwd": "${workspaceRoot}", "preLaunchTask": null, "runtimeExecutable": null, "runtimeArgs": [ "--nolazy" ], "env": { "NODE_ENV": "development" }, "externalConsole": false, "sourceMaps": false, "outDir": null }, { "name": "Attach", "type": "node", "request": "attach", "port": 5858, "address": "localhost", "restart": false, "sourceMaps": false, "outDir": null, "localRoot": "${workspaceRoot}", "remoteRoot": null } ] }

123456789101112131415161718192223242526272829303132333435363738 123456789101112131415161718192223242526272829303132333435363738

配置文件定义了两种调试模式：Launch模式和Attach模式。

（1）Launch 模式，顾名思义，直接运行调试模式。

这种模式下，系统自动生成的配置文件不完整，需要你进一步完善以后，才能以调试模式运行程序。即，将Launch配置中的runtimeExecutable指定实际的运行环境绝对路径。

"runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron.exe"

1 1

修改后的配置文件内容如下：

{"version": "0.2.0", "configurations": [ { "name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}\\app\\main.js", "stopOnEntry": false, "args": [ ], "cwd": "${workspaceRoot}", "preLaunchTask": null, "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron.exe", "runtimeArgs": [ "--nolazy" ], "env": { "NODE_ENV": "development" }, "externalConsole": false, "sourceMaps": false, "outDir": null }, { "name": "Attach", "type": "node", "request": "attach", "port": 5858, "address": "localhost", "restart": false, "sourceMaps": false, "outDir": null, "localRoot": "${workspaceRoot}", "remoteRoot": null } ] }

123456789101112131415161718192223242526272829303132333435363738 123456789101112131415161718192223242526272829303132333435363738

然后，在配置下拉列表框中选择“Launch”模式，并点击Start按钮或按F5即可以调试模式运行项目。

（2）Attach模式

配置文件中，自动生成的Attach模式配置信息已经完备，本学习项目无需修改。Attach模式的工作原理大致是这样的，首先让Node.js或Electron以调试模式运行应用开启端口监听，然后VSCode启动Attach模式，通过端口实现调试信息的交互。因此，我们需要进一步修改前面创建的gulpfile.js项目执行配置文件，将electron的启动模式修改为调试模式，修改后的内容如下：

123456789 123456789

参数：–debug-brk=5858以调试模式运行Electron应用，并使启动时暂定在项目程序代码的第一行，其调试监听的端口号为5858。如果你的断点没有设置在程序启动阶段的代码上，你可以使用参数：–debug=5858。

注意：

- 请务必保证gulpfile.js中使用的端口号与launch.json文件中Attach配置的端口号一致，

这里我采用了5858端口。

-–debug-brk暂停的第一行代码一般不是你编写的程序，多半是环境和第三方包的代码。

配置完成后，采用如下步骤和方法开启Attach模式，进行程序调试：

1）在配置下拉列表框中选择好“Attch”模式；

2）按下Ctrl+Shift+b，以调试监听模式运行应用；

3）点击Start按钮或按F5即可以调试模式运行项目；

现在，我们来设置两个断点，一个在应用启动阶段，一个在应用关闭阶段。

分别以Launch和Attch两种模式运行调试，你会发现Launch模式两个断点均可捕获到，

而Attch模式只能捕获到第二断点（应用关闭断点）。

三、通过Git对项目进行版本控制

Git是目前比较流行的分布式版本控制工具，你可以自行搭建Git服务器，也可以使用互联网上提供的各种Git托管服务，

有的Git托管服务只对开源项目免费，有的则可以对开源和闭源项目都免费，例如：

开源中国 / CSDN / 阿里云Code / （提供持续交互平台）

下面以CSDN的代码管理平台为例，每一个代码平台都有使用说明文档，下面参考阿里云Code，感觉比CSDN的要写的好一些。

1、在CSDN CODE上新建项目。

注册CSDN账号，登录 / 新建项目

新建时，记住要把默认勾选的使用README.md文件初始化选项去掉，因为你是上传已有项目。

2、安装 Git。

如果Git下载没有自动开始，您还可以在网站上手动下载。然后按照安装窗口中的指示进行。完成安装之后，打开一个新的shell，然后再次运行“git –version”来验证安装是否正确。选择适用于您操作系统的shell：

Mac OSX的Terminal Windows上的GitBash Linux上的Linux Terminal

3、生成SSH Keys

SSH key可以让你在你的电脑和Code服务器之间建立安全的加密连接。

在您的shell中（Windows下打开Git Bash），先执行以下语句来判断是否已经存在本地公钥：

cat ~/.ssh/id_rsa.pub

如果你看到一长串以 ssh-rsa或 ssh-dsa开头的字符串, 你可以跳过 ssh-keygen的步骤。

提示:最好的情况是一个密码对应一个ssh key，但是那不是必须的。你完全可以跳过创建密码这个步骤。

请记住设置的密码并不能被修改或获取。

你可以按如下命令来生成ssh key：

ssh-keygen -t rsa -C “你的Email地址”

这个指令会要求你提供一个位置和文件名去存放键值对和密码，你可以点击Enter键去使用默认值。

用以下命令获取你生成的公钥：

cat ~/.ssh/id_rsa.pub

复制这个公钥放到你的个人设置中的SSH/My SSH Keys下，请完整拷贝从ssh-开始直到你的用户名和主机名为止的内容。

如果打算拷贝你的公钥到你的粘贴板下，请参考你的操作系统使用以下的命令：

Windows:

clip < ~/.ssh/id_rsa.pub

Mac:

pbcopy < ~/.ssh/id_rsa.pub

GNU/Linux (requires xclip):

xclip -sel clip < ~/.ssh/id_rsa.pub

4、在CSDN Code上添加你的公钥

登录CSDN后，点击右上方“我的CODE”右侧的齿轮配置图标，进入“账户设置”页面，并点击添加公钥按钮，

输入名称和上一节复制到剪贴板的公钥，点击“保存”，即可完成公钥添加操作。

5、添加Git用户名并设置邮箱

您创建的每次Git提交都会使用该信息，所以很重要。

在您的shell中（Windows下打开Git Bash），运行如下命令来添加用户名：

git config –global user.name 您的名字
然后验证该配置是否正确：
git config –global user.name
使用如下命令设置邮箱地址：
git config –global user.email 您的邮箱地址
使用如下命令验证邮箱设置是否正确：
git config –global user.email

由于使用了“–global”选项，所以您只需要做一次这样的配置。Git会在您系统的任何项目中使用这个信息。

如果您希望在某个特定的项目中使用不同的用户名和邮箱地址，可以在那个项目中重新运行该命令，但不加“–global”选项。

检查您的信息

使用如下命令来验证前面做的那些配置：