详解Angular CLI + Electron 开发环境搭建


Posted in Javascript onJuly 20, 2017

本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家

用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单、快捷,而且可以模块化,紧跟最新技术趋势。

安装 Angular CLI 和 Electron

首先使用 npm 安装 Angular Cli:

$ npm i -g @angular/cli

然后安装 Electron

$ npm i -g electron

创建项目

用 Angular CLI 创建一个新项目:

$ ng new PROJECT-NAME --style=scss
$ cd PROJECT-NAME
$ npm i

这里选择使用 SCSS 作为 css 预处理器。

构建 Electron 配置

安装本地 Electron 依赖:

$ npm i -D electron electron-reload

electron-reload 这个是 electron 的一个可以检测文件变化而实时刷新的包,在配置中配置这个每次文件更改后程序都会实时刷新。

Electron 是使用 index.js 作为入口文件的,可以去网上看相关教程,下面我把我的 index.js 文件贴出来供大家参考:

// index.js
const {
 app, // 控制应用生命周期的模块。
 BrowserWindow, // 创建原生浏览器窗口的模块
} = require('electron');
require('electron-reload')(__dirname);
// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,window 会被自动地关闭
let win;
const createWindow = ()=> {
 // Create the browser window.
 win = new BrowserWindow({
 width: 1200,
 height: 800,
 frame: false,
 defaultFontSize: 16,
 minWidth: 1200,
 minHeight: 800,
 icon: `file://${__dirname}/dist/assets/icon.png`,
 defaultMonospaceFontSize: 16,
 defaultEncoding: "utf-8",
 webPreferences: {
  plugins: true
 }
 });
 // 加载应用的 index.html
 win.loadURL(`file://${__dirname}/dist/index.html`);
 // 打开开发工具
 win.webContents.openDevTools();
 // 当 window 被关闭,这个事件会被发出
 win.on('closed', () => win = null);
 win.on('ready-to-show', () => {
 win.show();
 win.focus();
 })
};
// 当 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();
});

因为我们使用 Angular CLI 编译后的文件是输出在 dist 文件夹的,所以我们要配置 loadURL 的地址为 dist 文件夹下的 index.html 文件。同时我们最好将静态文件都放在 src/assets 文件夹下,然后配置在 dist/assets 文件夹下就好了。

测试

可以在项目文件夹中运行以下命令查看效果了:

$ ng build --watch true
$ electron ./

这样就可以将项目启动起来了,而且可以实时监测文件的变化刷新软件,很便捷。

一些问题

现在软件基本可以跑起来了,但是在项目中只能使用 Chrome API,Electron 和 Node.js 提供的 API 在项目中并不能使用,因为 @angular/cli 提供的会将这部分代码编译掉,程序就会报错,那怎么办呢?有以下几个方法:

  1. 直接使用 Webpack 构建项目,Webpack 在配置文件中提供了 target 配置项,设置为 electron-renderer 就可以了。
  2. 使用 ng eject 弹出配置文件,然后在 webpack.config.js 中配置 "target": "electron-renderer" ,可以达到配置 webpack 的效果。
  3. 还有最后一个笨办法,那就是在每个使用 Electron 或 Node.js API 的文件中的顶部都使用 TypeScript 的声明来声明 require ,强制不编译 require ,方法如下;
declare global {
 interface Window {
 require: any;
 }
}

const electron = window.require('electron');

这三种方法都可以实现在 @angular/cli 创建的项目中使用 Electron 或 Node.js API,但都是略麻烦,希望 项目自尽快放开 target 的配置吧。

小尾巴

下面是我最近正在用 Angular4 和 Electron 构建的项目,还没开发完成,希望给新手参考一下,也希望大佬多多指点!

最近尝试着构建了几个小项目,发现框架之类的主要是使用上的差别,重要的还是在大型项目中的数据架构的处理,目前我在使用的数据架构主要有 redux 和 rxjs ,各有千秋,将数据架构与框架结合起来才能实现清晰明了、简单易开发的项目,努力向这个方法加油。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现加载等待效果示例
Sep 25 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 #Javascript
js 事件的传播机制(实例讲解)
Jul 20 #Javascript
详谈for循环里面的break和continue语句
Jul 20 #Javascript
js is_valid_filename验证文件名的函数
Jul 19 #Javascript
vue Render中slots的使用的实例代码
Jul 19 #Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 #Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
在Django的视图(View)外使用Session的方法
2015/07/23 Python
详解python的ORM中Pony用法
2018/02/09 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python装饰器练习题及答案
2019/11/01 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
一个入门级python爬虫教程详解
2021/01/27 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
香港士多网上超级市场:Ztore
2021/01/09 全球购物
八荣八耻演讲稿
2014/09/15 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python