使用Angular4 CLI + Electron 编写桌面应用程序

起步—— 开发前的准备工作

(注意: 此时 @angular/cli 版本为 1.4.2, electron 版本为 1.7.6, 阅读时请注意版本)

前置

准备

一 、electron 加载文件使用的是 file:// ,
原先使用@angular/cli 开发的 index.html 中的

<base href="/">

在 electron 中 需要修改为

<base href="./">

或者使用更通用的方法, 将这个 tag 替换成

<script>document.write('<base href="' + document.location + '" />');</script>

解决方法原文

二、angular中用到了 net 、 fs 等模块,
但是 @angular/cli 打包的时候并没有把该模块打包进去,需要做下配置修改。
在项目根目录下打开命令提示符 执行

ng eject && npm install

修改弹出的 webpack.config.js, 在 module.exports = {...} 对象里添加

"externals": {
    "assert": "require('assert')",
    "child_process": "require('child_process')",
    "cluster": "require('cluster')",
    "crypto": "require('crypto')",
    "electron": "require('electron')",
    "fs": "require('fs')",
    "net": "require('net')",
    "stream": "require('stream')"
    // 其他模块自行添加 
  },
  "target": "electron-renderer"

这两项都是 webpack 的配置选项, 具体内容请查看 Webpack Configuration

解决方法来源:
HOW TO INCLUDE NODE MODULES WITH WEBPACK
webpack-require-is-not-a-function-when-using-babel-6

开发

这里提供一个 简单的 选择文件夹并获取文件夹绝对路径 的 demo,github地址

总结:

目前来说,如果 @angular/cli 开发 electron 用到 native nodejs module 的话,会非常不方便, 因为它没有针对electron的 hot reload 相关配置。

GitHub 上 发现了个 angular-electron, 这个 starter kit 已经配置好了hot reload,以及打包 native node modules 的相关webpack 配置, 相当方便, 建议用这个库来开发你自己的 angular + electron 桌面应用。

相关学习资料:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容