Angular+Electron+VSCode的桌面應用

時間 2019-11-14

標籤 angular+electron+vscode angular electron vscode 桌面應用欄目 AngularJS 简体版

原文原文鏈接

Angular+Electron+VSCode的桌面應用

轉自：http://blog.csdn.net/yr7942793/article/details/50986696javascript

第一部分 Electron開發入門筆記

GitHub 的 Electron 框架（之前叫作 Atom Shell）容許你使用 HTML, CSS 和 JavaScript 編寫跨平臺的桌面應用。它是 io.js 運行時的衍生，專一於桌面應用而不是 web 服務端。Electron 豐富的原生 API 使咱們可以在頁面中直接使用 JavaScript 獲取原生的內容。html

本文學習的主要知識來自【譯】使用 AngularJS 和 Electron 構建桌面應用 http://www.javashuo.com/article/p-wpjahegj-z.html前端

1、基礎環境的搭建

爲了安裝相應的開發環境和運行庫，首先須要安裝如下兩個東西：
一、安裝Nodejs和npm包管理器
二、安裝Bower（Web開發包管理器）
三、代碼編輯器（Visual Studio Code）java

本文學習測試的環境爲Windows 10。node

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

到NodeJs官方網站http://www.nodejs.org，下載相應平臺的安裝包，我在下windows x64平臺的安裝包，並按提示安裝完畢。NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：
• 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
• 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
• 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。
因爲新版的nodejs已經集成了npm，因此以前npm也一併安裝好了。linux

經過輸入」node -v」和」npm -v」來測試是否成功安裝。命令以下，出現版本提示表示安裝成功: git

（二）Web開發包管理器Bower的安裝

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

來自 http://bower.ioweb

Bower可以爲咱們安裝和管理Web開發所須要的框架、庫、資源和實用工具。Bower的安裝方法：
利用npm來全局安裝bower，npm的全局安裝參數爲「-g」；shell

$ npm install -g bower

來自 http://bower.io

（三）編輯器Visual Studio Code（如下簡稱：VSCode）的安裝

經過https://www.visualstudio.com/下載for Windows版Visual Studio Code。並按提示安裝完畢。

2、建立一個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" //項目入口腳本 }

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

三、安裝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 文件夾，個人電腦已經在全局或其餘項目中安裝過Electron，因此安裝過程當中並無出現下載過程，這也說明，若是你的電腦已經在全局或其餘項目中安裝過 Electron，將再也不須要下載。若是須要更新已安裝的包可使用如下命令：

npm update electron-prebuilt

注意：這裏有一個問題，node_modules 文件夾裏面的目錄層級很深，因此想要刪除、複製和移動這個目錄，windows 會直接提示沒法執行這些操做，由於 node_modules 目錄內文件的絕對路徑名長度超過了 windows 系統規定的長度。一個比較好的辦法是，利用 WinRAR 軟件，壓縮該目錄時，勾選「壓縮後刪除原來的文件(D)」選項能夠解決這一問題。若是是複製或移動 node_modules 目錄的話也能夠採用這個方法。

好了，基本環境就安裝完畢了！！！

接下來咱們開始建立一個Hello World！的應用程序

四、首先建立一個入口程序 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; }); });

五、接下來咱們建立一個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>

六、運行這個應用

怎麼運行呢，總共有三種方法：

（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' }); });

如今咱們能夠在項目根目錄下輸入：
gulp run
來運行應用。運行結果以下：

此結果出現中文亂碼，能夠在index.html中加入一行解決這個問題：

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

完整代碼以下：

<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>

再次運行 gulp run 命令，結果以下：

七、整合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": [ ] }

而後，按需修改成以下代碼：

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

保存文件，如今按下 Ctrl+Shift+b 就能夠在 VSCode 中直接運行項目了，而不須要你在到 CMD 窗口中輸入命令了。

八、配置調試環境

點擊 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 } ] }

配置文件定義了兩種調試模式：Launch模式和Attach模式。

（1）Launch 模式，顧名思義，直接運行調試模式。
這種模式下，系統自動生成的配置文件不完整，須要你進一步完善之後，才能以調試模式運行程序。即，將Launch配置中的runtimeExecutable指定實際的運行環境絕對路徑。

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

修改後的配置文件內容以下：

{
    "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 } ] }

而後，在配置下拉列表框中選擇「Launch」模式，並點擊 Start 按鈕或按 F5 便可以調試模式運行項目。

（2）Attach模式

配置文件中，自動生成的 Attach 模式配置信息已經完備，本學習項目無需修改。Attach 模式的工做原理大體是這樣的，首先讓 Node.js 或 Electron 以調試模式運行應用開啓端口監聽，而後 VSCode 啓動 Attach 模式，經過端口實現調試信息的交互。所以，咱們須要進一步修改前面建立的 gulpfile.js 項目執行配置文件，將 electron 的啓動模式修改成調試模式，修改後的內容以下：

// 獲取依賴 var gulp = require('gulp'), childProcess = require('child_process'), electron = require('electron-prebuilt'); // 建立 gulp 任務 gulp.task('run', function () { childProcess.spawn(electron, ['--debug-brk=5858','.'], { stdio: 'inherit' }); });

參數：–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 模式只能捕獲到第二斷點（應用關閉斷點）。

3、經過Git對項目進行版本控制

Git 是目前比較流行的分佈式版本控制工具，你能夠自行搭建 Git 服務器，也可使用互聯網上提供的各類 Git 託管服務，
有的 Git 託管服務只對開源項目免費，有的則能夠對開源和閉源項目都免費，例如：

開源中國 https://git.oschina.net/
CSDN https://code.csdn.net/
阿里雲Code https://code.aliyun.com/ （提供持續交互平臺）

下面以 CSDN 的代碼管理平臺爲例，每個代碼平臺都有使用說明文檔，下面參考阿里雲Code，感受比CSDN的要寫的好一些。

一、在CSDN CODE上新建項目。

註冊CSDN帳號，登陸 https://code.csdn.net/ 新建項目
新建時，記住要把默認勾選的使用README.md文件初始化選項去掉，由於你是上傳已有項目。

二、安裝 Git。

若是 Git 下載沒有自動開始，您還能夠在網站上手動下載。而後按照安裝窗口中的指示進行。完成安裝以後，打開一個新的 shell，而後再次運行 「git –version」 來驗證安裝是否正確。選擇適用於您操做系統的 shell：

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

三、生成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

四、在CSDN Code上添加你的公鑰

登陸CSDN後，點擊右上方「個人CODE」右側的齒輪配置圖標，進入「帳戶設置」頁面，並點擊添加公鑰按鈕，
輸入名稱和上一節複製到剪貼板的公鑰，點擊「保存」，便可完成公鑰添加操做。

五、添加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」選項。

檢查您的信息
使用以下命令來驗證前面作的那些配置：

git config –global –list

六、Git的 .gitignore配置

.gitignore 配置文件用於配置不須要加入版本管理的文件，配置好該文件能夠爲咱們的版本管理帶來很大的便利。
VSCode 中，在項目根目錄下，添加一個名爲 「.gitignore」 的文件（固然，也能夠
在 Git Bash 中使用 vim .gitignore 命令直接編輯添加 .gitignore 文件）。
並逐行你不但願加入版本控制的文件或文件夾輸入：