如何在 Windows 上使用 electrojs-17 中的节点画布？

Question

我已经安装了 Windows 的所有必需组件，以便使用 Electronjs 构建应用程序。

版本：

• node -v v17.5.0
• npm -v

> My dependencies

  "dependencies": {
    "electron-squirrel-startup": "^1.0.0",
    "extract-zip": "^2.0.1",
    "nan": "^2.15.0",
    "node-canvas": "^2.9.0",
    "node-pre-gyp": "^0.17.0",
    "sha1": "^1.1.1"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.63",
    "@electron-forge/maker-deb": "^6.0.0-beta.63",
    "@electron-forge/maker-rpm": "^6.0.0-beta.63",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.63",
    "@electron-forge/maker-zip": "^6.0.0-beta.63",
    "electron": "17.0.0",
    "electron-rebuild": "^3.2.7"
  }

8.4.1`

错误

创建库 D:\test-app-latest\node_modules\node-canvas\build\Release\canvas.lib 和对象 D:\test-app-latest\node_modules\node-canvas\build\Release\canvas.expCanvas 。 obj : 错误 LNK2019: 无法解析的外部符号“__declspec(dllimport) public: class std::shared_ptr __cdecl v8::ArrayBuffer::GetBackingStore(void)" (_imp?GetBackingStore@Arr ayBuffer@v8@@QEAA?AV?$shared_ptr@VBackingStore@v8@@@std@@XZ) 在函数“void __cdecl parsePNGArgs(class v8::Local,struct PngClosure &)”(?parsePNGArgs@@YAXV? $Local@VValue@v8@@@v 8@@AEAUPngClosure@@@Z) [D:\test-app-latest\node_modules\node-canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj ：错误 LNK2001：无法解析的外部符号“__declspec(dllimport) public: class std::shared_ptr __cdecl v8::ArrayBuffer::GetBackingStore(void)” (_imp?G ptr@VBackingStore@v8@@@std@@XZ) [D:\test-app-latest\node_modules\node-canvas\build\canvas.vcxproj] ⠋ 准备本机依赖项：0 / 1ImageData.obj ：错误 LNK2001：无法解析的外部符号“__declspec(dllimport) public: class std::shared_ptr __cdecl v8::ArrayBuffer::GetBackingArrayBuffer@v8@@QEAA?AV?$shared_ptr@VBackingStore@ v8@@@std@@XZ) [D:\test-app-latest\node_modules\node-canvas\build\canvas.vcxproj] ✖ 准备本机依赖项：0 / 1

Forge 内部发生未处理的错误： node-gyp 无法重建“D:\test-app-latest\node_modules\node-canvas”。 有关更多信息，请在将 DEBUG 环境变量设置为“electron-rebuild”的情况下重新运行。

错误：C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\MSBuild\Current\Bin\MSBuild.exe 失败，退出代码：1

错误：node-gyp 无法重建' D:\test-app-latest\node_modules\node-canvas'。 有关更多信息，请在将 DEBUG 环境变量设置为“electron-rebuild”的情况下重新运行。

错误：C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\MSBuild\Current\Bin\MSBuild.exe 失败，退出代码：1

at NodeGyp.rebuildModule (D:\test-app-latest\node_modules\electron-rebuild\src\module-type\node-gyp.ts:129:13)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at ModuleRebuilder.rebuildNodeGypModule (D:\test-app-latest\node_modules\electron-rebuild\src\module-rebuilder.ts:93:5)
at ModuleRebuilder.rebuild (D:\test-app-latest\node_modules\electron-rebuild\src\module-rebuilder.ts:129:8)
at Rebuilder.rebuildModuleAt (D:\test-app-latest\node_modules\electron-rebuild\src\rebuild.ts:203:9)
at Rebuilder.rebuild (D:\test-app-latest\node_modules\electron-rebuild\src\rebuild.ts:158:9)
at D:\test-app-latest\node_modules\@electron-forge\core\src\util\rebuild.ts:38:5

错误 命令失败，退出代码 1。 信息访问https://yarnpkg.com/en/docs/cli/run有关此命令的文档。

`

Answer 1

你现在不能，看看这个： https://github.com/electron/ Electron/issues/29893

Electron 项目已决定在其 Windows 构建中切换到 clang/libc++。在实现 std::shared_ptr 时，MSVC STL 和 libc++ 不兼容 - 这意味着所有要链接在一起的对象文件必须使用相同的运行时。

目前 node-gyp 在 Windows 上不支持 clang。

这意味着许多原生 Node.js 插件被冷落了。

Answer 2

解决方法（截至 22/04/24 - Electron 18）是坚持使用最新的 Electron 12 版本，该版本仍在 Windows 上使用旧的构建环境/API 组合来实现画布等本机依赖项：

yarn add --dev [email protected]

特别是对于节点画布：

如果您正在使用电子生成器通过配置禁用本机依赖项的重建，并切换到正常工作的电子重建。

在与 Electron 12（或根本）的组合中，电子生成器无法正确使用节点画布。不管怎样......

它可以与 Electron 12 和 electro-rebuild 配合使用。

从理论上讲，根据我的理解，API 或依赖项之一可能会变得兼容，但这已经是一些专业的事情了，但还没有发生任何事情。

因此，请稍后再回来查看是否仍然需要。