使用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 桌面應用。

相關學習資料:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容