FS - 在 Webpack 5 上为 Electron 使用 FS答案

【问题标题】：FS - Use FS for Electron on Webpack 5FS - 在 Webpack 5 上为 Electron 使用 FS
【发布时间】：2022-01-13 23:30:43
【问题描述】：

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

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

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？

【问题讨论】：

标签： node.js vue.js webpack electron quasar-framework

【解决方案1】：

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

所以.. 我将它添加到 electron-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/modules 中这样使用：

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

【讨论】：

“electron-preload.js”到底在哪里？

【解决方案2】：

您可以通过将以下代码添加到 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 import dependency "xxx" 错误 的某些部分，然后覆盖其余部分无法解决导入的依赖“xxx”错误，您使用我上面的解决方案，这样您就可以同时使用 2 个解决方案。

【讨论】：