electron && angular 构建桌面应用（一）
<h3>electron介绍</h3><p>Electron是一个实时框架，允许您使用HTML5，CSS和JavaScript创建桌面应用程序。Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。编写第一个electron应用程序 </p>
<p>可以理解为electron是一个桌面应用的壳，装的内容是web页面。构建页面的各种框架，如angular, vue等，都可以与electron配合使用。</p>
<h3>Angular介绍</h3>
<p>Angular2 是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行。Angular2.x与Angular1.x 的区别类似 Java 和 JavaScript 或者说是雷锋与雷峰塔的区别，所以在学习Angular2.x时大家需要做好重新学习一门语言的心里准备。Angular2以后的版本与Angular2基本类似。Angular2教程。 Angular2使用TypeScript语言，教程见此。 </p>
<h3>构建一个electron + angular的桌面应用</h3>
<h4>1. 构建一个angular应用</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">ng new first-electron-angular
</pre>
</div>
<p>ng命令会使用npm来作为第三方包管理工具。npm的源慢，国内可设置为使用淘宝的镜像。建议安装cnpm。</p>
<h4>2. 启动应用</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">cd first-electron-angular
cnpm install electron --save-dev
cnpm i
ng serve
</pre>
</div>
<p>cnpm install electron --save-dev 安装electron包，--save-dev表示将electron依赖加入package.json文件。</p>
<p>可以看到，命令启动了一个web服务，地址为：http://localhost:4200。</p>
<h4>3. 修改package.json文件</h4>
<p>以下为修改点：</p>
<ul>
<li>scripts.start 修改启动脚本。需要同时启支electron和angular应用。 "start": "npm-run-all -p electron:serve ng:serve"</li>
<li>新增三个启动脚本
<ul>
<li>"ng:serve": "ng serve"</li>
<li>"electron:serve-tsc": "tsc -p tsconfig-serve.json"</li>
<li>"electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve"</li>
</ul>
</li>
<li>新增script.main入口文件地址："main": "main.js"</li>
<li>新增2个第三方工程包：
<ul>
<li>"npm-run-all": "4.1.5"</li>
<li>"wait-on": "4.0.0"</li>
</ul>
</li>
</ul>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">{
"name": "first-ng-electron",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "npm-run-all -p electron:serve ng:serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"ng:serve": "ng serve",
"electron:serve-tsc": "tsc -p tsconfig.json",
"electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve"
},
"main": "main.js",
"private": true,
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.24",
"@angular/cli": "~8.3.24",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"electron": "^8.0.0",
"electron-reload": "^1.5.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3",
"npm-run-all": "4.1.5",
"wait-on": "4.0.0"
}
}
</pre>
</div>
<h4>4. 新增main.ts文件</h4>
<p>在文件夹<span class="s1">first-ng-electron下新建main.ts文件。文件内容如下：</span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const {
app, // 控制应用生命周期的模块。
BrowserWindow, // 创建原生浏览器窗口的模块
} = require('electron');
import * as path from 'path';
import * as url from 'url';
// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，window 会被自动地关闭
let win;
const createWindow = ()=> {
// Create the browser window.
win = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
plugins: true
}
});
win.loadURL('http://localhost:4200');
// 打开开发工具
win.webContents.openDevTools();
// 当 window 被关闭，这个事件会被发出
win.on('closed', () => win = null);
win.on('ready-to-show', () => {
})
};
// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候这个方法就被调用
app.on('ready', createWindow);
// 当所有窗口被关闭时，退出程序
app.on('window-all-closed', () => {
// 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前应用会保持活动状态
process.platform !== 'darwin' && app.quit();
});
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
win === null && createWindow();
});
</pre>
</div>
<h4>5. 新增tsconfig-serve.json文件</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">{
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"types": [
"node"
],
"lib": [
"es2017",
"es2016",
"es2015",
"dom"
]
},
"include": [
"main.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
</pre>
</div>
<p> </p>
<h4>6. 运行electron应用</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">cnpm i
npm start
</pre>
</div>
<p>cnpm 安装新增的应用包，使用npm start来启动electron应用。记得在起electron应用前，保证4200端口未被占用。</p>
<p> </p>
<p>相关参数文档：</p>
<ul>
<li>angular5+electron: https://www.jianshu.com/p/24d7d5c357c3</li>
<li>angular9+electron8: https://github.com/maximegris/angular-electron</li>
<li>electron api说明：https://github.com/demopark/electron-api-demos-Zh_CN 文档是一个electron应用的方式。</li>
</ul>
<p> </p>
<p> </p>
<style>p.p1 { margin: 0; font: 11px Menlo; color: rgba(46, 174, 187, 1) }
span.s1 { font-variant-ligatures: no-common-ligatures }</style><br><br>
来源：https://www.cnblogs.com/sunada2005/p/12291798.html 感谢楼主的分享！刚好最近在学习桌面应用开发，这篇教程来得太及时了～
简单总结一下你的教程要点：
[*]Electron是桌面应用的"壳"，里面可以装web页面
[*]Angular2+使用TypeScript，需要重新学习
[*]通过npm-run-all和wait-on来协调electron和angular的启动顺序
[*]main.ts是electron的主入口文件
想请教几个问题：
1. 这种方式构建的应用，打包后的体积大概有多大？我看electron本身就不小。
2. 开发模式下每次修改代码都需要重新编译吗？有没有热更新的方案？
3. 如果想把应用打包成exe或者dmg，需要使用什么工具？electron-builder还是electron-forge？
另外，期待楼主的（二）篇！希望能看到关于：
- 应用打包的方法
- 如何调用原生系统API（比如文件对话框、系统托盘等）
- 打包后的性能优化
坐等更新，支持一下！
頁:
[1]