我是如何在electron上调用dll的导出函数的 - node-addon-api

已于 2025-03-23 17:04:18 修改
阅读量1.6k 收藏 30
点赞数 14
文章标签： electron javascript 前端 windows
于 2024-10-22 00:11:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LingMo_2020/article/details/143130728
版权

1. 需求

今天是2024年10月21日，昨天我发了个文章，叫《我是如何在electron上调用dll的导出函数的 - koffi库》。然后昨天晚上我将其应用到项目的时候，发现一个个地去构造 结构体、函数原型 真的太浪费时间了；而且我们的dll里边有具体业务代码，代码几乎都用了std标准库的许多功能（比如 std::string、std::vector ），这些在 ffi 上也很难构造。鉴于这些情况，我又不得不重新想个新方法。

现在我想到的方法是：用 c++ 编写出一个 node 模块，这个 node 模块链接了业务dll的导出函数，然后再将此模块导入进 electron 中。
想象一下，就是 electron 和 业务dll 有了联系，而在此中间搭建这种联系的桥梁就是这个 node 模块。(也就是 中介、枢纽、媒婆)

最后我实践了下，发现这个想法确实可以！因此我打算把其中的经过过程都写下来分享。（因为这是我所想到的一种思路，以后出现了什么坑或者问题啥的，就还会回来补充的）

额外说明：把业务代码直接迁移到 node 模块上其实也是可以的，但是在这篇文章中，我们的设想是为一个已有项目 的c++代码与 electron 进行连接。如果这个 已有项目 本身足够庞大，那么直接把代码迁移到 node 模块上就会显得不太现实，而且没有必要。（至少对于我们的项目来讲，就不会这样去做）

2. 参考

node官方文档：
[C++ addons] https://nodejs.org/docs/latest/api/addons.html
---- 对应中文文档：[C++ 插件] https://nodejs.cn/api/addons.html

[C/C++ addons with Node-API] https://nodejs.org/docs/latest/api/n-api.html
---- 对应中文文档：[C/C++插件(使用 Node-API)] https://nodejs.cn/api/n-api.html

node-addon-api github仓库: https://github.com/nodejs/node-addon-api 【看这个仓库的readme】
node-addon-examples github仓库: https://github.com/nodejs/node-addon-examples

3. 思路

我们先试着调用一个MessageBox

首先在 npm 上全局安装 node-gyp（需要安装 Visual Studio IDE 和 Python）:

npm install node-gyp -g

在这里插入图片描述

接着创建一个文件夹作为整体项目文件夹，我这里取名为"addon"

在这里插入图片描述

在此文件夹下用 管理员权限 打开一个cmd，输入npm init，根据它的提示输入相应的信息，最后yes确认，在文件夹下成功生成 package.json

在这里插入图片描述
在这里插入图片描述

接着输入 npm install node-addon-api，将 node-addon-api 安装到当前目录下

在这里插入图片描述
在这里插入图片描述

ok，现在我们分别创建源文件 module.cpp 和 binding.gyp（注意：后者文件名必须只能叫binding.gyp！！！）

//module.cpp

#include <napi.h>
#include <Windows.h>
#include <string>

Napi::Number Method(const Napi::CallbackInfo& info) {
	std::wstring str = L"Hello,World";
	MessageBoxW(NULL, str.c_str(), L"From addon.node", MB_OK);
	Napi::Env env = info.Env();
	return Napi::Number::New(env, 0);
}

Napi::Object Init(Napi::Env env, Napi::Object exports) {
	exports.Set(Napi::String::New(env, "msg"), Napi::Function::New(env, Method));
	return exports;
}

NODE_API_MODULE(NODE_GYP_MODULE_NAME, Init)

binding.gyp 的内容为:

{
  "targets": [
    {
      "target_name": "addon",
      "sources": ["module.cpp"],
	  'dependencies': [
		"<!(node -p \"require('node-addon-api').targets\"):node_addon_api_except",
	  ]
	}
  ]
}

其中，"<!(node -p \"require('node-addon-api').targets\"):node_addon_api_except", 里边的 node_addon_api_except 要看自身情况使用下面的三者之一：

  1. node_addon_api
  2. node_addon_api_except
  3. node_addon_api_maybe
    在这里插入图片描述

（就我的了解，如果 node模块 里边抛出了 javascript错误，那么仅仅使用node_addon_api的话，抛出错误后并不会终止代码运行，而是会继续执行下去。这时想要终止代码运行，就必须手动返回，即

	if ( ...... ) {
		Napi::Error::New(info.Env(), "node模块报错了").ThrowAsJavaScriptException();
		return;
	}
	......

而使用了node_addon_api_except的话，抛出错误后，代码随即将终止运行，即

	if ( ...... ) {
		Napi::Error::New(info.Env(), "node模块报错了").ThrowAsJavaScriptException();
	}
	......

想具体了解的，可直接看文档说明：https://github.com/nodejs/node-addon-api/blob/main/doc/setup.md

）

在这里插入图片描述
此时，addon 文件夹应该就是这个样子的了，我们回到cmd窗口，输入 node-gyp configure 并执行
在这里插入图片描述
执行完成后，会发现此时 addon 目录下多出了一个叫 build 的文件夹
在这里插入图片描述
我们进入到 build 文件夹中，打开这个sln文件，并从中找到 module.cpp

在这里插入图片描述
在这里插入图片描述
这就是我们刚刚所输入的模块的cpp代码，我们直接以Release x64的配置下编译

在这里插入图片描述
可以看到，我们的node模块 addon.node 编译成功了（其实这个node模块本质上就是dll，是一个pe文件）
在这里插入图片描述
在这里插入图片描述

接着，我们会把 addon.node 复制到 electron的工程文件夹下，并在electron的入口文件处调用模块的方法

在入口文件顶部导入addon.node，并取名作为addon

import addon from '../../addon.node'

然后在electron app()的准备方法中，调用模块里的msg()并将内容输出到控制台上。我们的预期结果是electron会如期弹出一个系统信息框，并在控制台中输入一个 0

console.log(addon.msg());

在这里插入图片描述
在这里插入图片描述
开始 F5 调试运行：
在这里插入图片描述
在这里插入图片描述
结果正确！我们的node模块运行成功了

4. 从node模块调用外部dll导出函数

我们简单写一个导出dll，项目名就叫 dllTest

//main.cpp

#include <Windows.h>
#include <string>

int AddFunc(int a, int b);
std::string StrAddFunc(std::string a, std::string b);

BOOL WINAPI DllMain(
	HANDLE hinstDLL,
	DWORD dwReason,
	LPVOID lpvReserved
) {
	return TRUE;
}

int AddFunc(int a, int b) {
	return a + b;
}

std::string StrAddFunc(std::string a, std::string b) {
	return a + b;
}

用模块定义文件来导出函数

Export.def的内容为：

LIBRARY
EXPORTS
	AddFunc
	StrAddFunc

在这里插入图片描述

这个dll将导出两个函数，分别是AddFunc和StrAddFunc，前者是整数相加，后者是字符串相加。
在这里插入图片描述
编译出两个文件，分别是 dllTest.dll 和 dllTest.lib

在这里插入图片描述

在 module.cpp 文件中链接这个lib文件，并将AddFunc和StrAddFunc的函数原型也写上来（我先把 dllTest.lib 复制到了build目录下）
在这里插入图片描述

//module.cpp

#include <napi.h>
#include <Windows.h>
#include <string>

//dllTest 的函数原型
int AddFunc(int a, int b);
std::string StrAddFunc(std::string a, std::string b);

//链接 dllTest.lib
#pragma comment(lib, "C:\\Users\\90965\\Desktop\\addon\\build\\dllTest.lib")

Napi::Number Method_AddFunc(const Napi::CallbackInfo& info) {
	Napi::Number a = info[0].As<Napi::Number>();
	Napi::Number b = info[1].As<Napi::Number>();

	Napi::Env env = info.Env();
	return Napi::Number::New(env, AddFunc(a, b));
}

Napi::String Method_StrAddFunc(const Napi::CallbackInfo& info) {
	Napi::String a = info[0].As<Napi::String>();
	Napi::String b = info[1].As<Napi::String>();

	Napi::Env env = info.Env();
	return Napi::String::New(env, StrAddFunc(a, b));
}

Napi::Object Init(Napi::Env env, Napi::Object exports) {
	exports.Set(Napi::String::New(env, "AddFunc"), Napi::Function::New(env, Method_AddFunc));
	exports.Set(Napi::String::New(env, "StrAddFunc"), Napi::Function::New(env, Method_StrAddFunc));
	
	return exports;
}

NODE_API_MODULE(NODE_GYP_MODULE_NAME, Init)

在这里插入图片描述

执行编译，成功得到了addon.node（dllTest.dll是我后面再复制进来的）。此时这个addon.node已经链接了dllTest.dll
在这里插入图片描述这两个文件我们都要复制到electron工程文件夹下，而且 dllTest.dll 和 addon.node 必须在同一个目录下。
在这里插入图片描述

接着我们更新electron入口代码，从addon调用我们的AddFunc和StrAddFunc函数

console.log(addon.AddFunc(6, 8));
console.log(addon.StrAddFunc("Hello", ", World"));

开始 F5 调试运行：
在这里插入图片描述
运行成功了，而且控制台也成功输出了

14
Hello, World

5. vite打包问题

还是以上面的源代码为例。

如果此时我们在electron工程文件夹下直接用 npm run build:win 进行打包的话，会发现此时运行 nodeaddon.exe 程序会弹出错误，错误原因是找不到 dll 文件在哪（也就是上文的 dllTest.dll ）
在这里插入图片描述
在这里插入图片描述

根据我的排查，addon.node 是能够成功加载进去的，也就是说问题并不出在addon.node，而是出在 dllTest.dll。electron 不知道 dllTest.dll在哪里，因此无法加载它，所以才爆出了这个错误。

目前我只找到了一种只针对已解包的解决办法（也就是不使用那个 setup 程序）：在已解包目录下，直接将 dllTest.dll 复制进去即可。
在这里插入图片描述
这时候，程序就能正常运行了

在这里插入图片描述
我们用 x64dbg 调试工具来看一下此时electron程序已加载模块的情况
在这里插入图片描述
调用 dll 代码的可不是渲染器进程，而是 electron 的主进程，也就是这张图片pid为30036的那个进程。
我们附加调试进去，查看模块列表并过滤搜索是否有 dllTest.dll
在这里插入图片描述
找到了，这说明 dllTest.dll 此时确实已经加载到electron程序中了

6. 调试（2025年3月1日 21:44补充）

6.1. 把工程文件夹搞好看点

首先说点题外的hhh，如果你感觉生成node模块的工程文件不好看（比如下面那些..、C:等等奇怪的名字）
在这里插入图片描述
现在可以删掉上边那个文件夹 (node_modules)
在这里插入图片描述
工程里的C:不要删，可以改个名字，按照里边的代码功能 我将其改名为_delay
在这里插入图片描述

..是我们的主代码文件夹，肯定不要删，可以改个名字，比如src或者source，这里我改成src
在这里插入图片描述

6.2. 怎么调试node模块

因为node模块（addon.node）的本质是dll，因此怎么调试的dll，就怎么调试的node模块
在将生成的debug版node模块复制到electron项目文件夹下并运行时，直接在Visual Studio下进行附加调试
在这里插入图片描述
在这里插入图片描述
（可以用左边的那个选择窗口，快速找到electron的进程），找到electron的进程之后，就单击右下角的"附加"即可
之后就可以随便使用断点和单步等等调试功能啦

注意！！！！因为我的node模块是在主进程上加载的，所以我是可以使用“选择窗口”来快速找到进程的（因为"选择窗口"找到的就是主进程）。而如果你的node模块是通过预加载脚本加载到渲染器进程上的，自然就用不了"选择窗口"来快速找到进程调试，只能通过一个个调试，看有没有加载调试符号来判断 是不是加载了node模块的那个进程

在这里插入图片描述

6.3. 编译后实时复制

还有一点，如果你vs编译出来的新的addon.node跟electron加载的addon.node不一样，可能断点会不给你下，比如下面这张图
在这里插入图片描述
这时候你一定要记得在vs新编译出来的addon.node要覆盖electron的addon.node，保证两者版本是一致的。

为了方便点，你可以利用生成后事件，编写一句copy的批处理语句并添加到生成后事件里边

copy "D:\electron-cpp-template\addon\build\Debug\addon.node" "D:\electron-cpp-template\electron-app\addon.node" /y

上边，"D:\electron-cpp-template\addon\build\Debug\addon.node"是vs编译出来的路径
"D:\electron-cpp-template\electron-app\addon.node"是electron加载的路径

在这里插入图片描述
应用确定后，之后无论怎么编译，vs都会自动帮你把新编译出来的node模块更新到electron里边啦

7. 打包问题解决！2025/3/18 23:49

感谢 imcholl 大佬的指导：https://blog.csdn.net/yi_zongjishi/article/details/146036125

在上文中，我曾经提到过一个问题，那就是打包electron应用的时候，会存在随行的dll无法一并打包的问题，现在说说解决办法：

在你的electron目录里，应该有electron-builder.yml这个文件
在这里插入图片描述
我们在其后边加上以下内容，即可完成随行文件或目录（不只是dll）的打包:

extraFiles:
	- aaa.dll
	- bbb.dll
	- asdasasdas.txt
	- dir/
	- asd/

就像我这样：
在这里插入图片描述

最后打包即可完成啦

花子LingMo
关注
利用Electron调用第三方DLL
AxCybersecurity的博客
09-18 1110
首先，在你的项目根目录下创建一个新的文件夹，比如"my-electron-app"，然后进入该文件夹并打开命令行终端。首先，我们需要准备要调用的第三方DLL。确保你已经获得了DLL文件，并将其放置在Electron应用程序的合适位置，比如项目根目录下的"lib"文件夹。通过上述步骤，你可以在Electron应用程序中成功调用第三方DLL，以扩展应用程序的功能。这将使用create-electron-app工具创建一个新的Electron应用程序，并将其结构生成在"my-electron-app"文件夹中。
Electron调用DLL
caijiEmber的博客
04-16 3231
electron调静态链接库方法
(四)electron尝试使用win32 API——node-gpy到底是干嘛的？
热门推荐
I feel lost
11-24 1万+
--------------------------------------DAY 4-------------------------------------------------------------- Q：测试之后，发现electron已经可以准确的知道windows进程的窗口句柄HWND，接下来要利用ipc，把electron进程的主窗口发送给HWND A:原生的API做不到，我们
electron自定义参数传入dll中创建windows原生窗体
whq343621668的博客
01-21 421
本次创建windows窗体使用了CreateWindowEx，用CreateWindow也是可以的，为了代码简洁展示，没有进行异常处理，参数也可以自行修改扩展，方便扩展成子窗体进行展示。本次案例采用vs2019创建，打开visual studio找到动态链接库(DLL)选项创建一个dll工程，dllmain.cpp代码如下。在electron上调用的效果。
深入浅出 electron 的 dll 调用
最新发布
qq_34985570的博客
03-24 127
electron 作用桌面端的开源的跨平台桌面应用程序开发框架，主要时依赖node Chromium 作为其渲染引擎和页面展示层 使用 Node.js 作为其后端运行环境，加入dll调用我们可以直接使用C++现成库，性能提升，特别时大数据和密集型计算场景，以及目前AI智能对话等方面。使用 ffi-napi，你可以在 Node.js 中直接调用已编译的动态链接库（.dll 文件或者 .so 文件），而无需编写任何 C++ 代码或者构建 C++ 插件。因为你不需要学习 addons 和 N-API。
electron系列（一）调用dll
mrdzhu的博客
06-22 4637
用electron的目的，其实很简单。就是web架构要直接使用前端电脑的资源，但是浏览器限制了使用，所以用electron来达到这个目的。其中调用dll是一个非常基本的操作。
Electron中调用dll
专注前端技术，包括Web端、移动端、小程序、APP
01-05 2238
截止目前Electron的官方稳定版本已经更新到了28.1.1。我在创建Electron项目时用的28.0.0版本，后面在项目中有用到调用dll方法的需求，大致的实现就是将后端给的dll文件引入到项目中，安装ffi-napi依赖，然后进行使用。但是在ElectronV21+的时候，官方引入了V8内存隔离区，当再使用ffi-napi这个库的时候就会报错，用尽了一切办法，都未果（如果读者有解决办法可私聊）。最终还是将Electron版本降到了20.3.8。当然ffi-napi。
electron中dll的调用
qq_28543535的博客
06-08 1153
electron中dll的调用 2、编写引用js .cpp文件 MyCode.h 生成.dll文件 MyDll.dll，新建引用dll方法的js文件
electron调用dll文件
六道对穿肠的学习之旅
11-02 5067
electron调用dll
electronic-ffi-demo：在Electron项目中通过node-ffi-napi调用cc ++的dll动态链接库
02-04
目前使用的Node版本是12，Electron版本6.0.10 npm包为ffi-napi@2.4.5，（初始使用Electric 1.7时用的是ffi，但ffi已停止支持最新版本的Node） 快速开始 # dev npm i npm start # build npm run dist 建立 使用电子...
在Electron中通过node-ffi-napi使用C++ DLL动态链接库
资源摘要信息:"在Electron项目中使用node-ffi-napi调用C++的dll动态链接库" 知识点概述： 1. Electron与Node.js的关系 2. node-ffi-napi包的介绍和功能 3. C++动态链接库（dll文件）的简介 4. Electron项目中配置...
执行有关electron-edge项目时需要的dll文件
10-17
运行electron-edge报错时 “The specified module could not be found \\?\D:\...”将这些dll文件放到项目的根目录可能可以解决这个问题
electronic-angular-native：准备好支持本机模块的Electron Angular应用程序的分发样板（node.js插件和普通本机库）
02-04
当您不拥有本机库的代码，或者有另一个已经编译为本机库的项目，并且想在您的Electron应用程序中使用该库时，这很有用。 在这种情况下，您将提供预编译的库，并通过外部功能接口（ node-ffi-napi ）使用它们 产品...
Node插件开发(1) - 快速入门
while(1) { smile(); }
03-04 1553
在使用Electron开发客户端时，如果现有Node模块所提供的功能无法满足需求，我们可以使用C++开发自定义的Node模块，也称插件（addon）。 Node.js插件的扩展名为`.node`，是二进制文件，其本质上是动态链接库重命名而来，在Windows平台是.dll文件，Linux/Unix平台是.so文件。
Electron 调用dll
w_231210的博客
08-29 1382
2.开发环境： electron12 + vue2 + node14。*electron版本控制好，不然会有很多bug。*electron 32位才能调用32位dll。1.开发问题： 使用C#的动态链库。1): npm 下载库。2): 动态库dll实例。
Electron调用dll
qq_24430033的博客
04-22 4656
Electron通过ffi调用dll(我这里以调用32位dll为例子，如果调用64为dll，更改编译环境即可) 编译 npm install ffi cd .\node_modules\ffi node-gyp rebuild --target=4.0.0 --arch=ia32 --target_arch=ia32 --msvs_version=2015 以同样的方式编译ref targ...
Electron如何调用.dll文件
梦想成为全栈的切图仔
10-19 2889
调用.dll文件与调用.exe稍有类似 ，类似的是可以在主进程里调用，但是同时也可以在渲染进程中进行调用。invoke3 这个方法第一个为要传递给.dll的入参，因为我们没有，所以不用传递，第二个则为一个函数，它返回两个值，第一个值为调用错误。大家可以这样解决，如果是在渲染进程中，大家的存放 .dll 的文件尽可能地放在项目的根目录，这样不管是开发环境还是编译环境我们都可以直接通过。一定是先从DOM（渲染进程）发送通知到主进程（main.js）中，由主进程接收到后，我们再进行.dll的文件调用。
在Electron中通过Node-API调用DLL导出函数的完整指南
imcholl的博客
03-05 928
在Electron项目中直接通过FFI库（如koffi）调用包含复杂C++标准库类型（如。）的DLL时，手动构造结构体和函数原型效率低下。，适用于已有大型C++项目与Electron集成场景。在Visual Studio的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值