详解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 相关文章推荐
学习面向对象之面向对象的术语
Nov 30 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
JS实现一个简单的日历
Feb 22 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
解决vue项目运行npm run serve报错的问题
Oct 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
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
jquery 插件开发备注
2010/08/27 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
全面了解python字符串和字典
2016/07/07 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
python进行参数传递的方法
2020/05/12 Python
python 5个实用的技巧
2020/09/27 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
经营目标管理责任书
2014/07/25 职场文书
活动费用申请报告
2015/05/15 职场文书
院系推荐意见
2015/06/05 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
纯html+css实现打字效果
2021/08/02 HTML / CSS