详解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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
Jquery中map函数的用法
Jun 03 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
vue 搭建后台系统模块化开发详解
May 01 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
Javascript数组及类数组相关原理详解
Oct 29 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
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的配置文件php.ini
2006/10/09 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
js 创建书签小工具之理论
2011/02/25 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python使用生成器实现可迭代对象
2018/03/20 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
浅谈python锁与死锁问题
2020/08/14 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
商务会议邀请函
2014/01/09 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
护士年终考核评语
2014/12/31 职场文书
幼儿教师辞职信
2015/02/27 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL