起步—— 开发前的准备工作
(注意: 此时 @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 桌面应用。