electron - 无法在 Electron 项目的 main.js 中使用 keytar

Question

我一直收到这个错误:

 error  in ./node_modules/keytar/build/Release/keytar.node

Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

 @ ./node_modules/keytar/lib/keytar.js 1:13-52
 @ ./src/background.js
 @ multi ./src/background.js

我将 background.js 设置为 package.json 中的主要 Electron 文件，因为我正在使用 vue/vuetify，它使用 main。 js 文件也是如此。

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "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",    // <------------------ see right here
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^3.4.3",
    "jwt-decode": "^2.2.0",
    "keytar": "^5.0.0",
    "request": "^2.88.0",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.0",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "electron": "^7.1.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-loader": "^0.6.0",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-electron-builder": "^1.4.3",
    "vue-cli-plugin-vuetify": "^2.0.2",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

搜索，似乎在渲染器进程中使用 keytar 时会发生这种情况。但是 background.js 不是渲染器进程。或者我错过了什么？我对 Electron 完全陌生。

Answer 1

我需要将 keytar 标记为外部(如 https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#native-modules 中所述)

// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      // List native deps here if they don't work
      externals: ['keytar']
    }
  }
}

一旦我这样做了，它就正常工作了。