木子李

Appearance

Electron开发中遇到的问题（electron-vite） ​

yallist版本的问题导致打包的软件运行问题 ​

使用electron-vite2.1的时候如果打包后的运行报yallist的错误请手动安装yallist4.0版本依赖

生产环境使用resource资源问题 ​

js
import MODEL_FILEPATH_PROD from '../../resources/yolov8s.onnx?asset';
let session = is.dev
    ? await ort.InferenceSession.create(MODEL_FILEPATH_PROD)
    : ort.InferenceSession.create(MODEL_FILEPATH_PROD.replace('app.asar', 'app.asar.unpacked')); //生产环境替换文件路径因为squeezenet1_1.onnx没有被assar

生产环境如果没有替换路径会直接导致程序报错

生产环境打包依赖的问题 ​

4bde28d16d886df1e16e7ea011aded5

这个问题是因为 electron主线程中使用的依赖使用commonjs导入的，而这个依赖的依赖使用的是ES moudel方式暴露的。只需要根据提示找到这个依赖 更换暴露方式，并且删除这个依赖的packge.json中的type：“model”配置 没有则不用删除

完整报错信息：

sh
[Window Title]
Error

[Main Instruction]
A JavaScript error occurred in the main process

[Content]
Uncaught Exception:
Error [ERR_REQUIRE_ESM]: require() of ES Module E:\species-recognition\dist\win-unpacked\resources\app.asar\node_modules\color-name\index.js from E:\species-recognition\dist\win-unpacked\resources\app.asar\node_modules\color-string\index.js not supported.
E:\species-recognition\dist\win-unpacked\resources\app.asar\node_modules\color-name\index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename E:\species-recognition\dist\win-unpacked\resources\app.asar\node_modules\color-name\index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in E:\species-recognition\dist\win-unpacked\resources\app.asar\node_modules\color-name\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at c._load (node:electron/js2c/node_init:2:13672)
    at Object.<anonymous> (E:\species-recognition\dist\win-unpacked\resources\app.asar\node_modules\color-string\index.js:2:18)
    at c._load (node:electron/js2c/node_init:2:13672)
    at Object.<anonymous> (E:\species-recognition\dist\win-unpacked\resources\app.asar\node_modules\color\index.js:1:21)
    at c._load (node:electron/js2c/node_init:2:13672)
    at Object.<anonymous> (E:\species-recognition\dist\win-unpacked\resources\app.asar\node_modules\sharp\lib\input.js:6:15)
    at c._load (node:electron/js2c/node_init:2:13672)
    at Object.<anonymous> (E:\species-recognition\dist\win-unpacked\resources\app.asar\node_modules\sharp\lib\index.js:7:1)
    at c._load (node:electron/js2c/node_init:2:13672)
    at Object.<anonymous> (E:\species-recognition\dist\win-unpacked\resources\app.asar\out\main\index.js:6:15)
    at c._load (node:electron/js2c/node_init:2:13672)

Electron报错信息过长导致错误提示框没有显示完全的问题 ​

只需要点击错误提示框，然后ctrl+c即可复制错误信息内容

在electron使用better-sqlite3完整步骤 ​

shell
#安装windows-build-tools
npm install --global windows-build-tools
#安装node-gyp
npm install -g node-gyp
#安装better-sqlite3
npm install better-sqlite3
#安装electron-rebuild
npm install --save-dev @electron/rebuild
#运行下面命令 重新构建二进制文件
.\node_modules\.bin\electron-rebuild -f -w better-sqlite3

原生Node.js模块由Electron支持，但由于Electron具有与给定Node.js不同的 应用二进制接口 (ABI)(由于使用Chromium的 BoringSL 而不是 OpenSSL 等 差异)，您使用的原生 模块需要为Electron重新编译。 否则，当您尝试运行您的应用程序时， 将会遇到以下的错误：

sh
Error: The module '/path/to/native/module.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION $XYZ. This version of Node.js requires
NODE_MODULE_VERSION $ABC. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).

下面是我安装better-sqlite3 运行遇到的报错（参考） ​

sh
[Window Title]
Error

[Main Instruction]
A JavaScript error occurred in the main process

[Content]
Uncaught Exception:
Error: The module '\\?\E:\species-recognition\node_modules\.pnpm\better-sqlite3@11.1.2\node_modules\better-sqlite3\build\Release\better_sqlite3.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 108. This version of Node.js requires
NODE_MODULE_VERSION 119. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
    at process.func [as dlopen] (node:electron/js2c/node_init:2:2214)
    at Module._extensions..node (node:internal/modules/cjs/loader:1356:18)
    at Object.func [as .node] (node:electron/js2c/node_init:2:2214)
    at Module.load (node:internal/modules/cjs/loader:1126:32)
    at Module._load (node:internal/modules/cjs/loader:967:12)
    at c._load (node:electron/js2c/node_init:2:13672)
    at Module.require (node:internal/modules/cjs/loader:1150:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at bindings (E:\species-recognition\node_modules\.pnpm\bindings@1.5.0\node_modules\bindings\bindings.js:112:48)
    at new Database (E:\species-recognition\node_modules\.pnpm\better-sqlite3@11.1.2\node_modules\better-sqlite3\lib\database.js:48:64)

您遇到的错误表明 better-sqlite3 模块是用不同版本的 Node.js 编译的。具体来说，该模块是用 NODE_MODULE_VERSION 108 编译的，而您当前的 Node.js 版本需要 NODE_MODULE_VERSION 119。

你遇到的错误表明 node-gyp 无法找到合适的 Visual Studio 安装来构建 better-sqlite3 的原生模块。以下是解决方法：

  1. 安装 Visual Studio：

    • 从这里下载并安装最新版本的 Visual Studio。
    • 在安装过程中，确保包括“使用 C++ 的桌面开发”工作负载。

  2. 配置 node-gyp 使用正确的 Visual Studio 版本：

    • 以管理员身份打开命令提示符并运行以下命令：

      sh
Copy code
npm config set msvs_version 2019

      将

      2019

      替换为你安装的 Visual Studio 版本。

  3. 验证安装：

    • 安装完成后，运行以下命令验证

      node-gyp

      能找到 Visual Studio：

      sh
Copy code
node-gyp configure

  4. 重新安装 better-sqlite3：

    • 导航到你的项目目录并清理之前的安装尝试：

      sh
Copy code
pnpm clean

    • 尝试重新安装

      better-sqlite3

      ：

      sh
Copy code
pnpm install better-sqlite3

这些步骤应该可以解决 node-gyp 的问题，并允许你成功安装 better-sqlite3。

sh
│ gyp info it worked if it ends with ok
│ gyp info using node-gyp@9.4.1
│ gyp info using node@16.20.2 | win32 | x64
│ gyp info find Python using Python version 3.12.4 found at "D:\Program Files\python\python.exe"
│ gyp info find VS using VS2017 (15.9.34930.103) found at:
│ gyp info find VS "C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools"
│ gyp info find VS run with --verbose for detailed information
│ gyp info spawn D:\Program Files\python\python.exe
│ gyp info spawn args [
│ gyp info spawn args   'D:\\node\\node_global\\node_modules\\pnpm\\dist\\node_modules\\node-gyp\\gyp\\gyp_main.py',
│ gyp info spawn args   'binding.gyp',
│ gyp info spawn args   '-f',
│ gyp info spawn args   'msvs',
│ gyp info spawn args   '-I',
│ gyp info spawn args   'E:\\species-recognition\\node_modules\\.pnpm\\better-sqlite3@11.1.2\\node_modules\\better-sqlite3\\b…  
│ gyp info spawn args   '-I',
│ gyp info spawn args   'D:\\node\\node_global\\node_modules\\pnpm\\dist\\node_modules\\node-gyp\\addon.gypi',
│ gyp info spawn args   '-I',
│ gyp info spawn args   'C:\\Users\\lw\\AppData\\Local\\node-gyp\\Cache\\16.20.2\\include\\node\\common.gypi',
│ gyp info spawn args   '-Dlibrary=shared_library',
│ gyp info spawn args   '-Dvisibility=default',
│ gyp info spawn args   '-Dnode_root_dir=C:\\Users\\lw\\AppData\\Local\\node-gyp\\Cache\\16.20.2',
│ gyp info spawn args   '-Dnode_gyp_dir=D:\\node\\node_global\\node_modules\\pnpm\\dist\\node_modules\\node-gyp',
│ gyp info spawn args   '-Dnode_lib_file=C:\\\\Users\\\\lw\\\\AppData\\\\Local\\\\node-gyp\\\\Cache\\\\16.20.2\\\\<(target_ar…  
│ gyp info spawn args   '-Dmodule_root_dir=E:\\species-recognition\\node_modules\\.pnpm\\better-sqlite3@11.1.2\\node_modules\…  
│ gyp info spawn args   '-Dnode_engine=v8',
│ gyp info spawn args   '--depth=.',
│ gyp info spawn args   '--no-parallel',
│ gyp info spawn args   '--generator-output',
│ gyp info spawn args   'E:\\species-recognition\\node_modules\\.pnpm\\better-sqlite3@11.1.2\\node_modules\\better-sqlite3\\b…  
│ gyp info spawn args   '-Goutput_dir=.'
│ gyp info spawn args ]
│ Traceback (most recent call last):
│   File "D:\node\node_global\node_modules\pnpm\dist\node_modules\node-gyp\gyp\gyp_main.py", line 42, in <module>
│     import gyp  # noqa: E402
│     ^^^^^^^^^^
│   File "D:\node\node_global\node_modules\pnpm\dist\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 9, in <module>      
│     import gyp.input
│   File "D:\node\node_global\node_modules\pnpm\dist\node_modules\node-gyp\gyp\pylib\gyp\input.py", line 19, in <module>        
│     from distutils.version import StrictVersion
│ ModuleNotFoundError: No module named 'distutils'
│ gyp ERR! configure error
│ gyp ERR! stack Error: gyp failed with exit code: 1
│ gyp ERR! stack     at ChildProcess.onCpExit (D:\node\node_global\node_modules\pnpm\dist\node_modules\node-gyp\lib\configure…  
│ gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
│ gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:293:12)
│ gyp ERR! System Windows_NT 10.0.22631
│ gyp ERR! command "D:\\Program Files\\nodejs\\node.exe" "D:\\node\\node_global\\node_modules\\pnpm\\dist\\node_modules\\node…  
│ gyp ERR! cwd E:\species-recognition\node_modules\.pnpm\better-sqlite3@11.1.2\node_modules\better-sqlite3
│ gyp ERR! node -v v16.20.2
│ gyp ERR! node-gyp -v v9.4.1
│ gyp ERR! not ok

这个错误表明在尝试编译 better-sqlite3 模块时，Python 环境中缺少 distutils 模块。distutils 是 Python 标准库的一部分，但在某些安装中可能会缺失。以下是解决此问题的步骤：

  1. 安装 distutils：

    • 在命令提示符（以管理员身份运行）中运行以下命令，以确保

      distutils

      被正确安装：

      shCopy codepython -m ensurepip --upgrade
python -m pip install --upgrade setuptools

  2. 验证 distutils 是否安装：

    • 你可以通过以下命令来验证

      distutils

      是否安装正确：

      sh
Copy code
python -m pip show setuptools

    • 该命令应该显示 setuptools 包的信息，确认其包含 distutils。

  3. 重新运行安装命令：

    • 在项目目录下重新运行安装命令：

      sh
Copy code
pnpm install better-sqlite3

通过这些步骤，你应该能够解决 distutils 缺失的问题，并成功编译 better-sqlite3 模块。如果仍然遇到问题，请确保你在正确的 Python 环境中运行这些命令，并且所有路径配置都是正确的。

提示{}错误 ​

微信截图_20240709095023

这种问题发生的原因肯能是资源路径不对，或者主线程使用了未定义的变量导致的