無法解析 Electron 中的“fs”

Question

我想在 Electron 應用程序中使用pdf.js 。 該庫使用多個節點模塊，例如fs或zlib 。 啟動應用程序時，我有很多錯誤，每個失敗的本機節點模塊導入都有一個錯誤：

找不到模塊：錯誤：無法解析“/Users/antoine/Desktop/black-charts-desktop/node_modules/pdf.js-extract/lib/pdfjs”中的“zlib”

然而，我已經在我的主 window 中授權了節點：

 webPreferences: { preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, nodeIntegration: true, },

如何在我的 Electron 應用程序中使用本機節點模塊？

Answer 1

這個問題的答案取決於所使用的 Electron 的版本和使用 webpack 的解決方案類型。此解決方案可以使用 webpack：

https://webpack.electron.build/

順便說一句：一般來說，不建議使用 nodeIntegration，但是，我個人不同意。 VSCode、Teams、Postman基於Electron成功使用nodeIntegration....

在"electron" version: "^20.0.3"中，構建沒有IPC的應用程序，在renderer進程中，需要添加@electron/remote package。

此外，在 package.json 中：

  "build": {
    "extraResources": [
      "./node_modules/@electron/remote/**"
    ]
  },

如果我們要使用 Typescript 和 Sass：

 "devDependencies": {
    "electron": "^20.0.3",
    "electron-builder": "^23.5.1",
    "electron-webpack": "^2.8.2",
    "electron-webpack-ts": "^4.0.1",
    "sass": "^1.49.9",
    "sass-loader": "^7.3.0",
    "typescript": "^3.8.3",
    "webpack": "4.42.1"
  },

腳本看起來像這樣，例如：

"scripts": {
    "dev": "electron-webpack dev --host 0.0.0.0",
    "pack": "electron-builder --dir",
    "compile": "electron-webpack",
    "dist": "npm run compile && electron-builder".
}