用电子应用程序打包Keytar

Question

我正在使用电子构建器(16.6.2)来打包我的电子应用程序，其中包含keytar (3.0.2)作为prod依赖项。

package.json文件包括：

"scripts": {
    "postinstall": "install-app-deps",
    "compile:dev": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
    "compile": "webpack --config webpack.build.config.js",
    "dist": "yarn compile && build"
},
"build": {
    "appId": "com.myproject",
    "asar": true,
    "files": [
      "bin",
      "node_modules",
      "main.js"
    ]
}

当我在同一个系统上运行.app时，它运行得很好。当我尝试在不同的系统上运行它(或删除我的node_modules)时，它无法找到keytar.node。当keytar被构建时，它包含了到我的系统的映像的完全限定的路径。我在控制台中得到以下错误：

Uncaught Error: Cannot open /Users/Kevin/Work/myproject/node_modules/keytar/build/Release/keytar.node
Error: dlopen(/Users/Kevin/Work/myproject/node_modules/keytar/build/Release/keytar.node, 
1): image not found

在构建过程中，我肯定错过了一个步骤。

Answer 1

结果，我在渲染程序中使用了keytar。我将keytar移动到主进程(不是通过Webpack / Babel)，并被电子构建器正确地打包。

main.js

ipcMain.on('get-password', (event, user) => {
    event.returnValue = keytar.getPassword('ServiceName', user);
});

ipcMain.on('set-password', (event, user, pass) => {
    event.returnValue = keytar.replacePassword('ServiceName', user, pass);
});

然后从渲染程序过程中我可以调用

const password = ipcRenderer.sendSync('get-password', user);

或

ipcRenderer.sendSync('set-password', user, pass);

Answer 2

更新：

我发现(按照OP)，转移我的主线程代码(它使用keytar)导致调用keytar函数返回TypeError: keytar.findPassword is not a function。

我不得不从我的webpack配置中移除主线程代码入口点，这样它就不会被babel所动。我在我的应用程序中包含了我的主线程源代码，它不打包/不传输，运行良好。

下面的信息仍然表示在您的webpack构建中包含二进制资产。

如果必须转换需要二进制文件的代码，则可以将file-loader添加到webpack配置中。

安装

npm i -D file-loader

或

yarn add -D file-loader

webpack配置(包括.dat文件)

...,
module: {
  rules: [{
    ...
  }, {
    test: /\.dat$/,
    use: {
      loader: "file-loader"
    }
  }]
},
...

如果要保留文件名，可以将name选项传递给加载程序：

use: {
  loader: "file-loader",
  options: {
    name: "[name].[ext]"
  }
}

关于 Github repo的更多信息。

Answer 3

window.require("electron").remote.require("keytar")

因为您正在处理呈现程序过程，并且希望从系统或主进程中使用本机api。