起步—— 開發(fā)前的準(zhǔn)備工作
(注意： 此時(shí) @angular/cli 版本為 1.4.2， electron 版本為 1.7.6每瞒， 閱讀時(shí)請(qǐng)注意版本)
前置
準(zhǔn)備
一 、electron 加載文件使用的是 file:// ,
原先使用@angular/cli 開發(fā)的 index.html 中的
<base href="/">
在 electron 中 需要修改為
<base href="./">
或者使用更通用的方法纯露， 將這個(gè) tag 替換成
<script>document.write('<base href="' + document.location + '" />');</script>
二剿骨、angular中用到了 net 、 fs 等模塊埠褪，
但是 @angular/cli 打包的時(shí)候并沒有把該模塊打包進(jìn)去浓利，需要做下配置修改。
在項(xiàng)目根目錄下打開命令提示符 執(zhí)行
ng eject && npm install
修改彈出的 webpack.config.js, 在 module.exports = {...} 對(duì)象里添加
"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"
這兩項(xiàng)都是 webpack 的配置選項(xiàng)钞速， 具體內(nèi)容請(qǐng)查看 Webpack Configuration
解決方法來(lái)源：
HOW TO INCLUDE NODE MODULES WITH WEBPACK
webpack-require-is-not-a-function-when-using-babel-6
開發(fā)
這里提供一個(gè) 簡(jiǎn)單的 選擇文件夾并獲取文件夾絕對(duì)路徑 的 demo贷掖，github地址
總結(jié)：
目前來(lái)說(shuō)，如果 @angular/cli 開發(fā) electron 用到 native nodejs module 的話玉工，會(huì)非常不方便羽资， 因?yàn)樗鼪]有針對(duì)electron的 hot reload 相關(guān)配置。
GitHub 上 發(fā)現(xiàn)了個(gè) angular-electron, 這個(gè) starter kit 已經(jīng)配置好了hot reload遵班，以及打包 native node modules 的相關(guān)webpack 配置屠升， 相當(dāng)方便， 建議用這個(gè)庫(kù)來(lái)開發(fā)你自己的 angular + electron 桌面應(yīng)用狭郑。
