FS - 在 Webpack 5 上为 Electron 使用 FS

Posted 2023-03-22

【中文标题】FS - 在 Webpack 5 上为 Electron 使用 FS

【英文标题】：FS - Use FS for Electron on Webpack 5

【发布时间】：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？

【参考方案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 个解决方案。