如何搭建Electron開發環境

NO IMAGE

原文發表於 https://lleohao.github.io/2017/09/02/如何搭建Electron開發環境/

目錄劃分

Electron 的開發主要分為兩個部分, 其中主程序(Main Process)主要負責開啟頁面和呼叫系統底層的資源等, 渲染程序(Renderer Process)則是一個普通的網頁視窗.

兩個程序的開發有著不同的開發方式, 主程序更像是傳統Node

Electron quick start

接下來執行npm install electron -D

<!-- src/renderer/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

在根目錄執行electron .

開發渲染執行緒

渲染執行緒的開發跟普通的前端開發沒有多大的區別, 為了開發的效率, 我們通常會選擇一款前端開發框架, 這裡我選擇的是Angular

初始化目錄

` ng new electron-base -sd src/renderer -si -sg -st --routing true --styles scss ` 

修改.angular-cli.json

如何在開發過程中進行程式碼熱更新

前端開發中, 我們可以使用webpack

開發時我們還是按照以前的方式啟動一個webpcak

打包渲染執行緒程式碼

開發完成後我們需要將前端的程式碼進行程式碼打包, 一個好的習慣是將程式碼的打包目錄放置在專案的根目錄中, 這裡我將前端的打包目錄設定在out/renderer

開發主執行緒

主執行緒的開發如Node

package.json

主執行緒除錯 (使用的編輯器是vscode)

新增啟動配置檔案, 專案根目錄新建.vscode

使用組合鍵ctrl f5

以後開發時只需要執行npm start

打包和釋出

electron-builder 可以將我們的程式打包成可執行檔案, 它的配置資訊發在package.json

執行npm build即可打包軟體

開發流程

執行npm run dev:renderer啟動渲染執行緒開發

執行npm run dev:main啟動主執行緒開發

執行npm start開啟Electron程式

執行npm build打包程式

示例專案地址 https://github.com/lleohao/el…