node.js - FS - 在 Webpack 5 上使用 FS 进行 Electron

Question

我最近将我的 Quasar 框架升级到了 v2，它使用 Vue3、Electron 16 和 Webpack 5。

当我尝试运行我的应用程序时，我不断收到此错误:

Module not found: Can't resolve imported dependency "fs"

我知道 webpack 5 不会自动执行 polyfill，因此我将这些添加到我的 quasar.conf.js 中:

      chainWebpack (chain) {
        const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
        chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
      }

但这不支持 fs 模块的 polyfill。

当我尝试添加此内容时:

        if (!cfg.resolve.fallback) {
          cfg.resolve.fallback = {}
          cfg.resolve.fallback.fs = false
        }

现在我收到一个错误:

TypeError: fs.readFileSync is not a function

我也尝试将其添加到我的 package.json 中，相同的行为(如预期):

  "browser": {
    "fs": false
  }

但是……我如何在我的 Electron 应用程序中使用 fs ？

Answer 1

现在能弄清楚了。 将其添加到此处，以防将来有人需要它。我看到很多人问这个问题，但没有得到解决。

所以..我将其添加到 electro-preload.js 中，因为 fs/内置 Node 模块可以通过渲染器访问:

import { contextBridge } from 'electron'

const fs = require('fs')
contextBridge.exposeInMainWorld('electronFs', {
  readFileSync: fs.readFileSync,
  existsSync: fs.existsSync
  // Other fs methods here
})

并在 Vue/JS/模块中像这样使用它:

const fs = window.electronFs
const jsonContent = JSON.parse(fs.readFileSync(SOME_PATH))