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
  }

但是..我如何在我的电子应用程序中使用fs？

Answer 1

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

所以..我把它添加到电子-preload.js，因为fs/内置节点模块可以通过渲染器访问：

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))

Answer 2

您可以通过将以下代码添加到 “构建”部分 来解决无法解析导入的依赖项“fs”错误 =23=]quasar.conf.js:

extendWebpack(cfg) {
  cfg.resolve.fallback = {
    fs: false
  }
}

quasar.conf.js:

module.exports = configure(function (ctx) {
  return {
    build: {
      extendWebpack(cfg) {
        cfg.resolve.fallback = {
          fs: false
        }
      } 
    }
  }
});

此外，如果还有更多无法解析导入的依赖项“crypto”、“Buffer”、“os”、“path”、“stream”、“assert”依此类推，您可以按如下所示添加它们：

quasar.conf.js:

module.exports = configure(function (ctx) {
  return {
    build: {
      extendWebpack(cfg) {
        cfg.resolve.fallback = {
          fs: false,
          crypto: false,
          Buffer: false,
          os: false,
          path: false,
          stream: false,
          assert: false,
          dns: false,
          net: false,
          tls: false,
          http2: false,
          https: false,
          http: false,
          zlib: false
        }
      } 
    }
  }
});

"node-polyfill-webpack-plugin" 无法涵盖所有 无法解决导入的依赖项“xxx”错误 如果您完全使用我上面的解决方案，你不需要使用 "node-polyfill-webpack-plugin"。也就是说，可以使用"node-polyfill-webpack-plugin"来覆盖部分Can't resolve imported dependency "xxx" errors 然后对于 Can't resolve imported dependency "xxx" errors 的其余部分，你可以使用我上面的解决方案，这样你就可以在同时.

FS - 在 Webpack 5 上将 FS 用于 Electron

FS - Use FS for Electron on Webpack 5

node.js

vue.js

webpack

electron

quasar-framework