详解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实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
vue实现菜单切换功能
May 08 Javascript
vue路由插件之vue-route
Jun 13 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
js实现验证码干扰(静态)
Feb 22 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函数实现数字与文字分页代码
2015/07/28 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python文件夹与文件的操作实现代码
2014/07/13 Python
python类和继承用法实例
2015/07/07 Python
python实现简易动态时钟
2018/11/19 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
物流创业计划书
2014/02/01 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
培根随笔读书笔记
2015/07/01 职场文书
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js