溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了Angular CLI + Electron 開發環境搭建，分享給大家
用 @angular/cli 配合 Electron 構建桌面軟件開發環境，可以在 Electron 中使用 Angular 的各種特性，使開發桌面軟件像開發網站一樣簡單、快捷，而且可以模塊化，緊跟最新技術趨勢。
安裝 Angular CLI 和 Electron
首先使用 npm 安裝 Angular Cli：
$ npm i -g @angular/cli
然后安裝 Electron
$ npm i -g electron
創建項目
用 Angular CLI 創建一個新項目：
$ ng new PROJECT-NAME --style=scss $ cd PROJECT-NAME $ npm i
這里選擇使用 SCSS 作為 css 預處理器。
構建 Electron 配置
安裝本地 Electron 依賴：
$ npm i -D electron electron-reload
electron-reload 這個是 electron 的一個可以檢測文件變化而實時刷新的包，在配置中配置這個每次文件更改后程序都會實時刷新。
Electron 是使用 index.js 作為入口文件的，可以去網上看相關教程，下面我把我的 index.js 文件貼出來供大家參考：
// index.js
const {
app, // 控制應用生命周期的模塊。
BrowserWindow, // 創建原生瀏覽器窗口的模塊
} = require('electron');
require('electron-reload')(__dirname);
// 保持一個對于 window 對象的全局引用，不然，當 JavaScript 被 GC，window 會被自動地關閉
let win;
const createWindow = ()=> {
// Create the browser window.
win = new BrowserWindow({
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', () => {
// 在 OS X 上，通常用戶在明確地按下 Cmd + Q 之前應用會保持活動狀態
process.platform !== 'darwin' && app.quit();
});
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
win === null && createWindow();
});
因為我們使用 Angular CLI 編譯后的文件是輸出在 dist 文件夾的，所以我們要配置 loadURL 的地址為 dist 文件夾下的 index.html 文件。同時我們最好將靜態文件都放在 src/assets 文件夾下，然后配置在 dist/assets 文件夾下就好了。
測試
可以在項目文件夾中運行以下命令查看效果了:
$ ng build --watch true $ electron ./
這樣就可以將項目啟動起來了，而且可以實時監測文件的變化刷新軟件，很便捷。
一些問題
現在軟件基本可以跑起來了，但是在項目中只能使用 Chrome API，Electron 和 Node.js 提供的 API 在項目中并不能使用，因為 @angular/cli 提供的會將這部分代碼編譯掉，程序就會報錯，那怎么辦呢？有以下幾個方法：
declare global {
interface Window {
require: any;
}
}
const electron = window.require('electron');
這三種方法都可以實現在 @angular/cli 創建的項目中使用 Electron 或 Node.js API，但都是略麻煩，希望 項目自盡快放開 target 的配置吧。
小尾巴
下面是我最近正在用 Angular4 和 Electron 構建的項目，還沒開發完成，希望給新手參考一下，也希望大佬多多指點！
最近嘗試著構建了幾個小項目，發現框架之類的主要是使用上的差別，重要的還是在大型項目中的數據架構的處理，目前我在使用的數據架構主要有 redux 和 rxjs ，各有千秋，將數據架構與框架結合起來才能實現清晰明了、簡單易開發的項目，努力向這個方法加油。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
