node.js - 使用 Electron 项目(和更好的 sqlite3)将未定义的 nodejs 处理为 bindings.js

Question

我创建了一个这样的 Electron.js 项目:

安装 Node 14

安装 vue-cli

创建模板项目 vue : vue create myproject

像这样安装 Electron package 器:vue add electron builder

安装 better-sqlite3 库

当我运行这个命令时: npm run electron:serve我在检查浏览器 Electron 时遇到错误，如下所示:

Uncaught TypeError: Cannot read property 'modules' of undefined
at Object.eval (bindings.js?dfc1:29)
at eval (bindings.js:223)
at Object../node_modules/bindings/bindings.js (chunk-vendors.js:142)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (database.js?4c26:9)
at Object../node_modules/better-sqlite3/lib/database.js (chunk-vendors.js:59)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (index.js?f4f1:2)

如果我输入 bindings.js 代码，我可以找到错误在哪里:

nodePreGyp:
  'node-v' +
    process.versions.modules** +

该文件的加载器不知道 nodejs 的进程环境变量。

为什么 node js 不知道它的进程变量，这很奇怪？

如果 Electron 能够很好地启动浏览器，那么问题在于渲染器进程吗？

但这似乎是更好的-sqlite3 模块，因为错误从使用 webpack 加载这个库开始？

有我的 package.json 文件:

{
  "name": "electron-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@types/better-sqlite3": "^5.4.1",
    "better-sqlite3": "^7.1.1",
    "core-js": "^3.6.5",
    "node-sass": "4.14.1",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@types/chai": "^4.2.11",
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/mocha": "^5.2.4",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-mocha": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^1.0.3",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
    "electron": "^9.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass-loader": "^8.0.2",
    "spectron": "11.0.0",
    "typescript": "~3.9.3",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.5",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "mocha": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

如果我用 import better-sqlite3 评论代码行，我没有问题。
你能告诉我问题出在哪里或帮助我更多地了解如何解决这个问题......
谢谢

Answer 1

这个问题源于由 vue cli 管理的 webpack auto。
如果您想在 vue 中使用 better-sqlite3 库(或类似问题)并将您的项目与 webpack WRAPPED by vue 加载到 vue-cli 中，您需要将其添加到 vue.config.js

configureWebpack: {
    externals: {
        'better-sqlite3': 'commonjs better-sqlite3'
    },
},

警告:你可以在没有这个特定文件的情况下使用 vue-cli 和 webpack 到你的项目中，因为 vue-cli 为你管理了它。但是如果你想更多地自定义 vue-cli，你需要手动添加这个文件(它与 vue-cli 隐藏的基本 vue.config.js 合并)。