在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

中的主要电子文件，因为我正在使用 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不是渲染器进程。 或者我错过了什么？ 我对电子完全陌生。

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

Answer 3

如果有人像我一样正在寻找 vite 配置：

import { defineConfig } from "vite";
import electron from "vite-plugin-electron";

export default defineConfig({
  mode: "development",
  plugins: [
    ...
    electron([
      {
        entry: "src/main/index.ts",
        vite: {
          build: {
            rollupOptions: {
              external: ["keytar"],
            }
          }
        }
      },
      ...
    ]),
  ],
});