详解Angular CLI + Electron 开发环境搭建
本文介绍了AngularCLI+Electron开发环境搭建,分享给大家
用@angular/cli配合Electron构建桌面软件开发环境,可以在Electron中使用Angular的各种特性,使开发桌面软件像开发网站一样简单、快捷,而且可以模块化,紧跟最新技术趋势。
安装AngularCLI和Electron
首先使用npm安装AngularCli:
$npmi-g@angular/cli
然后安装Electron
$npmi-gelectron
创建项目
用AngularCLI创建一个新项目:
$ngnewPROJECT-NAME--style=scss $cdPROJECT-NAME $npmi
这里选择使用SCSS作为css预处理器。
构建Electron配置
安装本地Electron依赖:
$npmi-Delectronelectron-reload
electron-reload这个是electron的一个可以检测文件变化而实时刷新的包,在配置中配置这个每次文件更改后程序都会实时刷新。
Electron是使用index.js作为入口文件的,可以去网上看相关教程,下面我把我的index.js文件贴出来供大家参考:
//index.js const{ app,//控制应用生命周期的模块。 BrowserWindow,//创建原生浏览器窗口的模块 }=require('electron'); require('electron-reload')(__dirname); //保持一个对于window对象的全局引用,不然,当JavaScript被GC,window会被自动地关闭 letwin; constcreateWindow=()=>{ //Createthebrowserwindow. win=newBrowserWindow({ 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',()=>{ //在OSX上,通常用户在明确地按下Cmd+Q之前应用会保持活动状态 process.platform!=='darwin'&&app.quit(); }); app.on('activate',()=>{ //OnOSXit'scommontore-createawindowintheappwhenthe //dockiconisclickedandtherearenootherwindowsopen. win===null&&createWindow(); });
因为我们使用AngularCLI编译后的文件是输出在dist文件夹的,所以我们要配置loadURL的地址为dist文件夹下的index.html文件。同时我们最好将静态文件都放在src/assets文件夹下,然后配置在dist/assets文件夹下就好了。
测试
可以在项目文件夹中运行以下命令查看效果了:
$ngbuild--watchtrue $electron./
这样就可以将项目启动起来了,而且可以实时监测文件的变化刷新软件,很便捷。
一些问题
现在软件基本可以跑起来了,但是在项目中只能使用ChromeAPI,Electron和Node.js提供的API在项目中并不能使用,因为@angular/cli提供的会将这部分代码编译掉,程序就会报错,那怎么办呢?有以下几个方法:
- 直接使用Webpack构建项目,Webpack在配置文件中提供了target配置项,设置为electron-renderer就可以了。
- 使用ngeject弹出配置文件,然后在webpack.config.js中配置"target":"electron-renderer",可以达到配置webpack的效果。
- 还有最后一个笨办法,那就是在每个使用Electron或Node.jsAPI的文件中的顶部都使用TypeScript的声明来声明require,强制不编译require,方法如下;
declareglobal{ interfaceWindow{ require:any; } } constelectron=window.require('electron');
这三种方法都可以实现在@angular/cli创建的项目中使用Electron或Node.jsAPI,但都是略麻烦,希望项目自尽快放开target的配置吧。
小尾巴
下面是我最近正在用Angular4和Electron构建的项目,还没开发完成,希望给新手参考一下,也希望大佬多多指点!
最近尝试着构建了几个小项目,发现框架之类的主要是使用上的差别,重要的还是在大型项目中的数据架构的处理,目前我在使用的数据架构主要有redux和rxjs,各有千秋,将数据架构与框架结合起来才能实现清晰明了、简单易开发的项目,努力向这个方法加油。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。