详解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 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
理解jquery事件冒泡
Jan 03 Javascript
php基于redis处理session的方法
Mar 14 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
vue如何判断dom的class
Apr 26 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 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 全局变量范围分析
2009/08/07 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
RequireJs的使用详解
2017/02/19 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
angular4自定义组件详解
2017/09/28 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
给国外客户的邀请函
2014/01/30 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
幼儿评语大全
2014/04/30 职场文书
平安工地汇报材料
2014/08/19 职场文书
六年级学生期末评语
2014/12/26 职场文书