无法在电子项目的 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

我在 package.json 中将 background.js 设置为主电子文件，因为我正在使用 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"
  ]
}

搜索了一下，好像是在renderer进程中使用keytar的时候出现的。但是 background.js 不是渲染器进程。或者我错过了什么？我对电子完全陌生。

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']
    }
  }
}

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

Answer 2

运行合适loader (source).

yarn add node-loader -D

// vue.config.js
configureWebpack: {
    devtool: 'source-map',
    module: {
      rules: [
        { test: /\.node$/, loader: 'node-loader' }
      ]
    }
  }

无法在电子项目的 main.js 中使用 keytar

Unable to use keytar in main.js of electron project

electron

electron-builder

vuetify.js

keytar