如何搭建Electron開發(fā)環(huán)境

TwIStOy 發(fā)布于2019-08-21 12:05 / 3206人閱讀

摘要：原文發(fā)表于如何搭建開發(fā)環(huán)境這個項(xiàng)目結(jié)構(gòu)是我在編寫基于和的七牛文件上傳總結(jié)出來的本文主要介紹如何從零開始搭建高效的開發(fā)環(huán)境主要內(nèi)容如下通過合理的目錄劃分來組織代碼使用簡化開發(fā)如何在渲染進(jìn)程開發(fā)時使用熱更新如何在主進(jìn)程開發(fā)時使用自動重啟如何在主

原文發(fā)表于 https://lleohao.github.io/2017/09/02/如何搭建Electron開發(fā)環(huán)境/
這個項(xiàng)目結(jié)構(gòu)是我在編寫  基于Electron 和 Angular 的七牛文件上傳App  總結(jié)出來的
本文主要介紹如何從零開始搭建高效的Electron開發(fā)環(huán)境, 主要內(nèi)容如下：

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

使用npm script簡化開發(fā)

如何在渲染進(jìn)程開發(fā)時使用熱更新

如何在主進(jìn)程開發(fā)時使用自動重啟

如何在主進(jìn)程開發(fā)時使用Typescript

如何打包和發(fā)布軟件


示例項(xiàng)目地址 https://github.com/lleohao/el...
發(fā)現(xiàn) http://hao.jser.com/ 這個網(wǎng)站臭不要臉的轉(zhuǎn)載文章

目錄結(jié)構(gòu)劃分 初始化目錄

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

目前我們的開發(fā)目錄如下：

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

目錄劃分

Electron 的開發(fā)主要分為兩個部分, 其中主進(jìn)程(Main Process)主要負(fù)責(zé)打開頁面和調(diào)用系統(tǒng)底層的資源等, 渲染進(jìn)程(Renderer Process)則是一個普通的網(wǎng)頁窗口.

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

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

Electron quick start

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

順便添加上兩個文件

# src/main.js
const { app, BrowserWindow } = require("electron")
const path = require("path")
const url = require("url")

let win

function 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 + Q
    if (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()
    }
})




  
    
    Hello World!
  
  
    Hello World!
    We are using node ,
    Chrome ,
    and Electron .

在根目錄運(yùn)行electron .(或者是./node_modules/.bin/electron .)啟動程序

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

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

開發(fā)渲染線程

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

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

這里我使用Angular-cli工具來初始化項(xiàng)目

安裝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": "./", // 解決打包后無法加載文件
  ...
}]

如何在開發(fā)過程中進(jìn)行代碼熱更新

前端開發(fā)中, 我們可以使用webpack享受到自動刷新、熱更新等方便的功能，那么在Electron的開發(fā)過程我們?nèi)绾蜗硎艿牡竭@些功能了？這里我們只需要簡單的修改下main.js文件即可

function isDev() {
    return process.env["NODE_ENV"] === "development"
}

function createWindow() {
    win = new BrowserWindow({ width: 800, height: 600 })

    if (isDev()) {
        // 這里的url換成你所使用框架開發(fā)時的url
        win.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
    })
}

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

通過設(shè)置環(huán)境變量NODE_ENV來區(qū)分開發(fā)和生成環(huán)境, 在package.json中添加兩個命令來方便開發(fā)

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

打包渲染線程代碼

開發(fā)完成后我們需要將前端的代碼進(jìn)行代碼打包, 一個好的習(xí)慣是將代碼的打包目錄放置在項(xiàng)目的根目錄中, 這里我將前端的打包目錄設(shè)置在out/renderer中

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

在package.json中添加打包命令

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

開發(fā)主線程

主線程的開發(fā)如Node程序的開發(fā)沒有多大的區(qū)別, 這里就不多贅述.

雖然Node對ES6的支持已經(jīng)很完善了, 但更新的標(biāo)準(zhǔn)的支持就不怎么好, 這里我們可以使用Babel之類的工具進(jìn)行來使用最新的語法.

這里我推薦使用Typescript, 優(yōu)點(diǎn)主要有三個:

靜態(tài)檢查, 畢竟是主線程的代碼, 有點(diǎn)錯誤可就是程序直接崩潰的節(jié)奏

自動提示, 這個不解釋

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

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

安裝Typescript

運(yùn)行npm install typescript -D

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

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

在package.json中添加開發(fā)和打包命令

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

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

添加啟動配置文件, 項(xiàng)目根目錄新建.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啟動程序

在文件中添加斷點(diǎn)進(jìn)行調(diào)試

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

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

安裝nodemon

npm install nodemon -D

修改啟動命令

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

以后開發(fā)時只需要運(yùn)行npm start就可做到主線程的自動刷新

打包主線程

主線程的開發(fā)過程我們可能會使用其他的構(gòu)建工具, 這里我們同渲染線程一樣, 將主線程的打包文件放在out目錄中, 至此打包目錄的結(jié)構(gòu)應(yīng)當(dāng)如下

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

打包和發(fā)布

electron-builder 可以將我們的程序打包成可執(zhí)行文件, 它的配置信息發(fā)在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" // 自行修改
    }
  }
}

運(yùn)行npm build即可打包軟件

開發(fā)流程

運(yùn)行npm run dev:renderer啟動渲染線程開發(fā)

運(yùn)行npm run dev:main啟動主線程開發(fā)

運(yùn)行npm start打開Electron程序

運(yùn)行npm build打包程序

示例項(xiàng)目地址 https://github.com/lleohao/el...

GPU云服務(wù)器云服務(wù)器如何搭建java開發(fā)環(huán)境開發(fā)環(huán)境搭建搭建開發(fā)環(huán)境安卓開發(fā)環(huán)境搭建

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87428.html

發(fā)表評論

登陸后可評論

0條評論

TwIStOy

男|高級講師

我要關(guān)注我要私信

TA的文章

100天漲薪4k！從功能測試到自動化測試，我整理的超全學(xué)習(xí)指南！

閱讀 2154·2021-10-12 10:11
● JDK JRE JVM三者的區(qū)別

閱讀 851·2021-10-09 09:41
Confluence漏洞或致大規(guī)模網(wǎng)絡(luò)攻擊客戶群體包括近6萬家公司和組織

閱讀 3773·2021-09-09 11:37
易速互聯(lián)：十三周年慶，美國Az機(jī)房，1Gbps不限流量服務(wù)器僅550元，服務(wù)器支持自由定制配置

閱讀 1950·2021-09-08 10:41
css3動畫在手機(jī)端的流暢度比較

閱讀 2647·2019-08-30 12:58
【整理】18種推薦的CSS命名和書寫規(guī)范

閱讀 2376·2019-08-30 10:58
gulp插件解決瀏覽器緩存問題

閱讀 1286·2019-08-26 13:40
Bootstrap FileInput(文件上傳)中文API整理

閱讀 4123·2019-08-26 13:36

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何搭建Electron開發(fā)環(huán)境

Hello World!

相關(guān)文章

**Hola～一款基于Electron的聊天軟件**

***electronVue+bootstrapVue搭建桌面應(yīng)用開發(fā)環(huán)境***

electron + react + react-router + mobx + webpack 搭

**使用Electron+avalon+jquery+codemirror開發(fā)自己的IDE**

Electron 前端提測小工具

發(fā)表評論

0條評論

TwIStOy

男|高級講師

TA的文章

100天漲薪4k！從功能測試到自動化測試，我整理的超全學(xué)習(xí)指南！

● JDK JRE JVM三者的區(qū)別

Confluence漏洞或致大規(guī)模網(wǎng)絡(luò)攻擊客戶群體包括近6萬家公司和組織

易速互聯(lián)：十三周年慶，美國Az機(jī)房，1Gbps不限流量服務(wù)器僅550元，服務(wù)器支持自由定制配置

css3動畫在手機(jī)端的流暢度比較

【整理】18種推薦的CSS命名和書寫規(guī)范

gulp插件解決瀏覽器緩存問題

Bootstrap FileInput(文件上傳)中文API整理

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何搭建Electron開發(fā)環(huán)境

Hello World!

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！