本文介紹了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.jsconst { 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 提供的會將這部分代碼編譯掉，程序就會報錯，那怎么辦呢？有以下幾個方法：

1. 直接使用 Webpack 構建項目，Webpack 在配置文件中提供了 target 配置項，設置為 electron-renderer 就可以了。
2. 使用 ng eject 彈出配置文件,然后在 webpack.config.js 中配置 "target": "electron-renderer" ，可以達到配置 webpack 的效果。
3. 還有最后一個笨辦法，那就是在每個使用 Electron 或 Node.js API 的文件中的頂部都使用 TypeScript 的聲明來聲明 require ，強制不編譯 require ，方法如下;

declare global { interface Window { require: any; }}const electron = window.require('electron');

這三種方法都可以實現在 @angular/cli 創建的項目中使用 Electron 或 Node.js API，但都是略麻煩，希望 項目自盡快放開 target 的配置吧。

小尾巴

下面是我最近正在用 Angular4 和 Electron 構建的項目，還沒開發完成，希望給新手參考一下，也希望大佬多多指點！

最近嘗試著構建了幾個小項目，發現框架之類的主要是使用上的差別，重要的還是在大型項目中的數據架構的處理，目前我在使用的數據架構主要有 redux 和 rxjs ，各有千秋，將數據架構與框架結合起來才能實現清晰明了、簡單易開發的項目，努力向這個方法加油。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。