如何為Electron應(yīng)用開發(fā)原生模塊-魔扣目錄

大家都知道JAVAScript無(wú)論是在瀏覽器中運(yùn)行、還是在Node.js中運(yùn)行都是單線程運(yùn)行的，所以并不適合在處理一些CPU密集型任務(wù)。但是Node.js允許開發(fā)者使用C、C++等語(yǔ)言開發(fā)像普通的Node.js模塊一樣通過require()函數(shù)加載的原生模塊。因?yàn)镋lectron內(nèi)置Node.js，這樣就使得Electron同樣具備了相同的能力。

在實(shí)際業(yè)務(wù)場(chǎng)景中，也有一些現(xiàn)成的C/C++項(xiàng)目，在Node.js項(xiàng)目中直接復(fù)用可以節(jié)約很多開發(fā)成本。

本文將探討如何在Electron應(yīng)用中開發(fā)原生模塊，以擴(kuò)展應(yīng)用的功能和性能。

搭建原生模塊開發(fā)環(huán)境

在目前的原生模塊開發(fā)中，一般都是基于Node-Api進(jìn)行開發(fā)。

Node-Api是什么呢？

Node-API（Node Application Programming Interface）是一個(gè)用于編寫跨平臺(tái)原生插件的封裝層。它提供了一組穩(wěn)定的 C/C++ 函數(shù)，使開發(fā)者可以編寫與 Node.js 運(yùn)行時(shí)環(huán)境兼容的原生插件。通過使用 Node-API，開發(fā)者可以消除由于 Node.js 版本變化而引起的插件不兼容的問題，并且能夠更方便地編寫和維護(hù)跨平臺(tái)的原生模塊。

理解一下就是我們無(wú)需為不同版本的Node.js編譯不同版本的原生模塊。不同版本的 Node.js 使用同樣的接口為原生模塊提供服務(wù)，這些接口是 ABI 化的，只要 ABI 的版本號(hào)一致，編譯好的原生模塊就可以直接使用，而不需要重新編譯。

ABI 化是指將軟件接口轉(zhuǎn)化為應(yīng)用程序二進(jìn)制接口（Application Binary Interface）的過程。在編程中，ABI 化的目標(biāo)是確保在不同編譯器、操作系統(tǒng)以及硬件平臺(tái)之間的二進(jìn)制兼容性。通過將接口規(guī)范化為二進(jìn)制標(biāo)準(zhǔn)，不同模塊或程序可以相互調(diào)用和交互，而無(wú)需關(guān)心具體實(shí)現(xiàn)細(xì)節(jié)和底層平臺(tái)差異。Node-API 的設(shè)計(jì)就是為了實(shí)現(xiàn)跨版本和跨平臺(tái)的 ABI 兼容性，以便 C/C++ 模塊能夠在不同的 Node.js 環(huán)境中無(wú)需重新編譯即可運(yùn)行。

Node-API有哪些開發(fā)方式？

基于 Node-API 的原生模塊開發(fā)可以使用 C 語(yǔ)言或者基于 node-addon-api 項(xiàng)目使用 C++ 語(yǔ)言的兩種方式。

基于C語(yǔ)言開發(fā)：由于受眾為前端開發(fā)者，C語(yǔ)言的編程復(fù)雜度高、開發(fā)效率較低，開發(fā)過程可能較為繁瑣。
基于 node-addon-api項(xiàng)目開發(fā)：相對(duì)于純 C 語(yǔ)言開發(fā)，C++ 提供了更多的高級(jí)特性和工具，開發(fā)效率相對(duì)較高。node-addon-api 項(xiàng)目提供了一組方便的 C++ API 封裝，簡(jiǎn)化了與 Node-API 的交互過程，減少了部分底層操作。

接下來我們就基于這個(gè)項(xiàng)目來開發(fā)一個(gè) Electron 的原生模塊。

安裝 Node.js：首先，確保您已經(jīng)安裝了 Node.js，可以從 Node.js 官網(wǎng)下載并安裝適合您操作系統(tǒng)的版本。
需要全局安裝 node-gyp，它是專門為構(gòu)建開發(fā)、編譯原生模塊環(huán)境而生的跨平臺(tái)命令行工具。

npm install -g node-gyp

創(chuàng)建空項(xiàng)目目錄：創(chuàng)建一個(gè)新的項(xiàng)目目錄，作為原生模塊的開發(fā)目錄。
初始化 npm 項(xiàng)目：進(jìn)入項(xiàng)目目錄，打開終端，并運(yùn)行以下命令初始化 npm 項(xiàng)目。

npm init

根據(jù)提示，設(shè)置項(xiàng)目的名稱、版本等信息。
安裝 node-addon-api：運(yùn)行以下命令安裝 node-addon-api 模塊：

npm install node-addon-api --save-dev

以上就已經(jīng)搭建好了基本的原生模塊開發(fā)環(huán)境，接下來通過一個(gè)簡(jiǎn)單的例子，來實(shí)現(xiàn)一個(gè)訪問系統(tǒng)文件的原生模塊帶大家了解一下開發(fā)流程。

開發(fā)原生模塊訪問系統(tǒng)文件并讀取文件內(nèi)容

開發(fā)原生模塊需要熟悉C++編程和Node.js的C/C++擴(kuò)展開發(fā)，涉及一些底層的編程和跨平臺(tái)的知識(shí)。這里的例子較為簡(jiǎn)單，方便大家理解。

創(chuàng)建 C++ 文件：在項(xiàng)目目錄下創(chuàng)建一個(gè) C++ 源文件，例如 filesystem.cpp，并添加以下代碼內(nèi)容：

#include <napi.h>
#include <IOStream>
#include <fstream> 

Napi::String ReadFile(const Napi::CallbackInfo& info) { 

    Napi::Env env = info.Env(); 

    // 讀取文件路徑參數(shù) 
    std::string filePath = info[0].As<Napi::String>().Utf8Value(); 

    // 打開文件并讀取內(nèi)容 std::ifstream file(filePath);
    std::string content((std::istreambuf_iterator<char>(file)), std::istreambuf_iterator<char>());
    file.close();

    // 將內(nèi)容轉(zhuǎn)換為 Napi::String 返回 
    return Napi::String::New(env, content); 
} 

Napi::Object Init(Napi::Env env, Napi::Object exports) { 
    exports.Set("readFile", Napi::Function::New(env, ReadFile));
    return exports; 
}
NODE_API_MODULE(addon, Init)

上述代碼定義了一個(gè) ReadFile 函數(shù)，它接受一個(gè)文件路徑參數(shù)，并返回文件的內(nèi)容。

NODE_API_MODULE是Node-API 提供的一個(gè)重要的宏，用于在 C++ 中定義 Node.js 原生模塊的入口點(diǎn)，創(chuàng)建一個(gè)模塊初始化函數(shù)，并將此函數(shù)暴露給 Node.js 運(yùn)行時(shí)。

使用 NODE_API_MODULE 定義原生模塊的入口點(diǎn)，可以讓開發(fā)者以 C++ 的方式編寫模塊的初始化、導(dǎo)出函數(shù)、屬性等，并與 Node.js 運(yùn)行時(shí)進(jìn)行交互。并可以在 Node.js 中加載和使用。

Init 函數(shù)是模塊的初始化函數(shù)，用于在模塊加載時(shí)注冊(cè)和導(dǎo)出相應(yīng)的函數(shù)、屬性等。然后，通過 NODE_API_MODULE 將 Init 函數(shù)暴露給 Node.js 運(yùn)行時(shí)，并指定模塊的名字為 "addon"。

創(chuàng)建 binding.gyp 文件：在項(xiàng)目目錄中創(chuàng)建一個(gè)名為 binding.gyp 的文件，并添加以下內(nèi)容：

{ 
    "targets": [ 
        { 
            "target_name": "filesystem", 
            "sources": ["filesystem.cpp"]
        }
}

binding.gyp 是一個(gè)用于配置 Node.js 原生模塊構(gòu)建過程的項(xiàng)目文件。它采用了 JSON 格式，并使用特定的語(yǔ)法來定義編譯選項(xiàng)、依賴項(xiàng)和源文件等信息。通過編輯 binding.gyp 文件，可以指定編譯器和鏈接器的選項(xiàng)，添加所需的依賴庫(kù)，并確定要編譯的源文件。

編譯原生模塊

在構(gòu)建編譯原生模塊時(shí)，需要使用 node-gyp ，它會(huì)讀取 binding.gyp 文件并根據(jù)其內(nèi)容進(jìn)行編譯操作。node-gyp 提供了一個(gè)簡(jiǎn)化的構(gòu)建流程，使得開發(fā)人員能夠輕松地配置和構(gòu)建原生模塊。

使用以下命令構(gòu)建該模塊。

$ node-gyp configure 
$ node-gyp build

運(yùn)行上述命令將生成一個(gè)名為 build/Release/filesystem.node 的編譯好的原生模塊文件。

接下來，就可以在任何 Node.js 文件中使用該模塊：創(chuàng)建一個(gè)名為 app.js 的 JavaScript 文件，并添加以下代碼

const addon = require('./build/Release/filesystem.node'); 

const filePath = '/path/to/file.txt'; 

const content = addon.readFile(filePath); 

console.log(content);

上述代碼使用 require 導(dǎo)入原生模塊，然后調(diào)用 readFile 函數(shù)讀取指定文件的內(nèi)容，并輸出到控制臺(tái)。

總結(jié)

在 Electron 應(yīng)用中，使用和開發(fā)原生模塊可以為前端開發(fā)同學(xué)提供更廣闊的可能性；能夠利用操作系統(tǒng)級(jí)別的功能來提升應(yīng)用的性能。

那么有同學(xué)就會(huì)有疑問，除了自己開發(fā)原生模塊還有什么方案可以給Electron應(yīng)用提供更廣泛的功能擴(kuò)展，包括底層系統(tǒng)功能的訪問、高性能計(jì)算呢？

當(dāng)然有，在日常開發(fā)中，可以使用動(dòng)態(tài)鏈接庫(kù)（Dynamic Link Library，DLL）進(jìn)行擴(kuò)展功能的模塊化。使用動(dòng)態(tài)鏈接庫(kù)可以使用更多的語(yǔ)言和框架進(jìn)行開發(fā)，適合不同開發(fā)者的需求。比如，一個(gè)go開發(fā)者也可以給我們提供一個(gè)動(dòng)態(tài)鏈接庫(kù)供Electron調(diào)用，也可以將go代碼打包成不同平臺(tái)的文件供其他平臺(tái)調(diào)用，更適合獨(dú)立功能各個(gè)平臺(tái)使用的場(chǎng)景。原生模塊則更專注于為 Node.js 和 Electron 應(yīng)用程序提供特定功能的開發(fā)。

在實(shí)際應(yīng)用中，可根據(jù)具體需求和開發(fā)團(tuán)隊(duì)的技術(shù)棧來選擇合適的方式，結(jié)合動(dòng)態(tài)鏈接庫(kù)和原生模塊來擴(kuò)展 Electron 應(yīng)用程序的功能。

參考鏈接

Electron桌面應(yīng)用開發(fā)：https://juejin.cn/book/7152717638173966349?enter_from=course_center&utm_source=course_center
node-gyp 實(shí)現(xiàn) nodejs 調(diào)用 C++：https://juejin.cn/post/6844903971220357134?searchId=20231214152519329167E9F0AB744365BF