當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

如何搭建Electron开发环境

發布時間：2024/4/17 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了如何搭建Electron开发环境小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

這個項目結構是我在編寫基于Electron 和 Angular 的七牛文件上傳App 總結出來的

本文主要介紹如何從零開始搭建高效的Electron開發環境, 主要內容如下：

通過合理的目錄劃分來組織代碼

使用npm script簡化開發

如何在渲染進程開發時使用熱更新

如何在主進程開發時使用自動重啟

如何在主進程開發時使用Typescript

如何打包和發布軟件

示例項目地址 https://github.com/lleohao/el...

發現 http://hao.jser.com/ 這個網站臭不要臉的轉載文章

目錄結構劃分

初始化目錄

首先按照常規的方法新建一個項目文件夾(這里我的示例文件夾叫做electron-base，然后使用npm init初始化目錄。

目前我們的開發目錄如下：

electorn-base ├── .gitignore - git忽略文件 ├── LICENSE - 開源協議 ├── README.md - 文檔 └── package.json - npm package

目錄劃分

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

兩個進程的開發有著不同的開發方式, 主進程更像是傳統Node的開發, 而渲染進程則是普通的前端開發. 同時它們之間又有著可以共用的部分(如輔助函數、數據模型等), 因此可以按照下面的方式劃分

electorn-base ├── ... - 省略 └── src - 代碼源文件├── main - 主線程代碼├── renderer - 渲染線程└── shared - 公用代碼

Electron quick start

接下來運行npm install electron -D安裝Electron，同時在package.json添加main字段，這代表整個項目的入口文件，這里我們先設置為src/main/main.js.

順便添加上兩個文件

# src/main.js const { app, BrowserWindow } = require('electron') const path = require('path') const url = require('url')let winfunction createWindow() {win = new BrowserWindow({ width: 800, height: 600 })win.loadURL(url.format({pathname: path.join(__dirname, '../renderer/index.html'),protocol: 'file:',slashes: true}))// Open the DevTools.win.webContents.openDevTools()// Emitted when the window is closed.win.on('closed', () => {// Dereference the window object, usually you would store windows// in an array if your app supports multi windows, this is the time// when you should delete the corresponding element.win = null}) }// This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow)// Quit when all windows are closed. app.on('window-all-closed', () => {// On macOS it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== 'darwin') {app.quit()} })app.on('activate', () => {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (win === null) {createWindow()} })  <!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 .(或者是./node_modules/.bin/electron .)啟動程序

為了以后方便啟動程序, 將這段命令添加到package.json中

// package.json 部分內容 "main": "src/main/main.js", "scripts": {"start": "./node_modules/.bin/electron ." }, "devDependencies": {"electron": "^1.7.5" }

開發渲染線程

渲染線程的開發跟普通的前端開發沒有多大的區別, 為了開發的效率, 我們通常會選擇一款前端開發框架, 這里我選擇的是Angular, 當然也可以選擇其他的框架, 只需要按照下文中的要求修改打包路徑.

導入Angular(可選, 使用其他框架可以跳過)

這里我使用Angular-cli工具來初始化項目

安裝cli工具

`npm install -g @angular/cli`

初始化目錄

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

修改.angular-cli.json

"apps": [{"root": "src/renderer", // 源文件目錄"outDir": "out/renderer", // 輸出目錄"baseHref": "./", // 解決打包后無法加載文件... }]

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

前端開發中, 我們可以使用webpack享受到自動刷新、熱更新等方便的功能，那么在Electron的開發過程我們如何享受的到這些功能了？這里我們只需要簡單的修改下main.js文件即可

function isDev() {return process.env['NODE_ENV'] === 'development' }function createWindow() {win = new BrowserWindow({ width: 800, height: 600 })if (isDev()) {// 這里的url換成你所使用框架開發時的urlwin.loadURL('http://127.0.0.1:4200');} else {win.loadURL(url.format({pathname: path.join(__dirname, '../renderer/index.html'),protocol: 'file:',slashes: true}))}// Open the DevTools.win.webContents.openDevTools()// Emitted when the window is closed.win.on('closed', () => {// Dereference the window object, usually you would store windows// in an array if your app supports multi windows, this is the time// when you should delete the corresponding element.win = null}) }

開發時我們還是按照以前的方式啟動一個webpcak服務器進行開發, Electron通過HTTP協議打開頁面, 這樣我們依舊可以享受到代碼熱更新等功能.

通過設置環境變量NODE_ENV來區分開發和生成環境, 在package.json中添加兩個命令來方便開發

"scripts": {"ng": "ng", // angular alias"start": "NODE_EBV=production ./node_modules/.bin/electron .", // 添加環境變量"dev:renderer": "ng serve" // 啟動渲染線程開發服務器 },

打包渲染線程代碼

開發完成后我們需要將前端的代碼進行代碼打包, 一個好的習慣是將代碼的打包目錄放置在項目的根目錄中, 這里我將前端的打包目錄設置在out/renderer中

Angular項目只需要修改.angular-cli.json中的outDir字段, 其他的框架可以自行修改.

在package.json中添加打包命令

"scripts": {...."build:renderer": "ng buidl --prod" // 打包渲染線程代碼 },

開發主線程

主線程的開發如Node程序的開發沒有多大的區別, 這里就不多贅述.

雖然Node對ES6的支持已經很完善了, 但更新的標準的支持就不怎么好, 這里我們可以使用Babel之類的工具進行來使用最新的語法.

這里我推薦使用Typescript, 優點主要有三個:

靜態檢查, 畢竟是主線程的代碼, 有點錯誤可就是程序直接崩潰的節奏

自動提示, 這個不解釋

編譯方便, 比起Babel的配置文件, Typescript的配置要簡單的多

使用Typescript (不使用的可以跳過)

安裝Typescript

運行npm install typescript -D

添加配置文件, 在src目錄下添加tsconfig.main.json文件

{"compilerOptions": {"outDir": "../out", // 輸出目錄, 同渲染線程放在一起"sourceMap": true, // 調試時需要"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"target": "es6", // 輸出代碼版本, 由于在Node中運行, es6沒問題"module": "commonjs", // module 處理方式"typeRoots": [ // .d.ts 目錄"../node_modules/@types"],"lib": [ // 可選, 添加新的語法支持"es2017"]},"exclude": [ // 排除渲染線程目錄"renderer"] }

在package.json中添加開發和打包命令

"scripts": { ..."dev:main": "tsc -p ./src/tsconfig.main.json -w", // 開發"build:main": "tsc -p ./src/tsconfig.main.json" // 打包 }

主線程調試 (使用的編輯器是vscode)

添加啟動配置文件, 項目根目錄新建.vscode文件夾,在其中新建launch.json

{// Use IntelliSense to learn about possible Node.js debug attributes.// Hover to view descriptions of existing attributes.// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Launch Program","cwd": "${workspaceRoot}","runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron","program": "${workspaceRoot}/src/main/main.ts", // 你的主文件"sourceMaps": true, "outFiles": ["${workspaceRoot}/out/**/*.js" // 你的輸出文件目錄],"env": {"NODE_ENV": "development"}}] }

使用組合鍵ctrl + f5啟動程序

在文件中添加斷點進行調試

主線程開啟自動刷新 (可選)

我們的渲染線程可以做到代碼變更后自動刷新頁面, 在主線程的開發中我們可以使用 nodemon 來實現同樣的功能

安裝nodemon

npm install nodemon -D

修改啟動命令

"scripts": {"start": "nodemon --watch src/main --watch src/shared --exec './node_modules/.bin/electron' ./out/main/main.js" }

以后開發時只需要運行npm start就可做到主線程的自動刷新

打包主線程

主線程的開發過程我們可能會使用其他的構建工具, 這里我們同渲染線程一樣, 將主線程的打包文件放在out目錄中, 至此打包目錄的結構應當如下

out ├── main - 主線程打包文件位置 │ └── main.js - 入口文件 ├── renderer - 渲染線程打包位置 │ ├── .... │ └── index.html - 入口頁面 └── shared - 公用文件└── utils.js

打包和發布

electron-builder 可以將我們的程序打包成可執行文件, 它的配置信息發在package.json中

這里配置的是Mac的打包信息, 具體的可以自行查閱文檔

{"main": "out/main/main.js", // 入口文件"scripts": {..."pack": "electron-builder -m --dir", // 簡單打包軟件, 用于測試"dist": "electron-builder -m", // 正式打包軟件"build": "npm run build:renderer && npm run build:main && npm run dist" // 打包軟件},"build": {"appId": "com.lleohao.sample", // 自行修改 "mac": {"category": "public.app-category.productivity" // 自行修改}} }

運行npm build即可打包軟件

開發流程

運行npm run dev:renderer啟動渲染線程開發

運行npm run dev:main啟動主線程開發

運行npm start打開Electron程序

運行npm build打包程序

示例項目地址 https://github.com/lleohao/el...

總結

以上是生活随笔為你收集整理的如何搭建Electron开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android -- 处理ViewPag
下一篇：《中国人工智能学会通讯》——4.7 当前