如何忽略例如Quasar 的 webpack 中的 "fs" 模块

Question

我正在为 quasar 应用程序引入一些模块，这些模块的设计考虑到了 node.js。他们中的一些人正在做，例如require('fs')（事实上他们更有可能做 require('fs-extra')（https://www.npmjs.com/package/fs-extra）但我假设我之后的答案是一样的？）

当我运行 yarn quasar dev，在 chromium 中启动它时，出现以下错误：

vue-router.esm.js?8c4f:1924 TypeError: Cannot read property 'match' of undefined
    at patch (polyfills.js?cce3:31)
    at patch (graceful-fs.js?dadc:70)
    at Object.eval (graceful-fs.js?dadc:29)
    at eval (graceful-fs.js:281)
    at Object../src/statics/qqnlp/node_modules/graceful-fs/graceful-fs.js (0.js:1750)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (index.js?91e5:4)
    at Object../src/statics/qqnlp/node_modules/fs-extra/lib/fs/index.js (0.js:1512)
    at __webpack_require__ (app.js:770)

这只是噪音，因为我在这些模块中使用的函数不会在 webapp 版本中使用任何文件系统函数。（在为 Electron 构建时，它们可能会被使用，因此我们计划届时将任何此类调用包装在条件语句中。）

Firefox中的报错信息很不一样，但还是出vue-router.esm.js:

TypeError: "process.version is undefined"

 patch polyfills.js:31
 patch graceful-fs.js:70
 <anonymous> graceful-fs.js:29
 <anonymous> graceful-fs.js:281
 js 0.js:1750
 __webpack_require__ app.js:770
 fn app.js:130
 ...another 30 lines of similar stuff...

（虽然错误看起来非常不同，但触发它的是相同的 require() 调用，就像我将其注释掉一样，该网络应用程序在 Firefox 和 Chromium 中都可以运行。）

所以，我在想如果我告诉 webpack 忽略 'fs-extra' 模块，这个问题可能会消失？

而且我认为 webpack offers ignorePlugin 正是这种事情？

我无法解决的是将该代码放在 Quasar 系统中的什么位置？并且它只影响网络应用程序版本而不影响 Electron 版本。

顺便说一句，有问题的模块使用 require() 和 module.exports=...，为了做到这一点，我根据阅读将 babel.config.js 更改为如下所示]

module.exports = {
  sourceType: "unambiguous",
  presets: [
    '@quasar/babel-preset-app'
  ]
}

Answer 1

我被迫回到这个问题上，经过反复试验才弄明白。

第 1 步： 您需要将 'null-loader' 添加到您的项目中，但仅作为开发依赖项。例如。如果使用纱线：

yarn add --dev null-loader

第 2 步： 在 quasar.conf.js 中，在 build: 部分中，找到 extendWebpack (cfg){...} 块。然后在里面添加这个（我把它放在现有规则之前）：

cfg.module.rules.push({
  test: /(fs-extra|graceful)/,
  loader: "null-loader"
  })

这就是说，每当它尝试加载模块名称中任何位置的模块时，使用 null-loader 来抑制它。

测试工作的一些变化。即使我使用的模块只是直接加载 fs-extra，而不是 graceful-fs。（顺便说一下，/(fs-extra|graceful-fs)/ 不起作用......没能找到原因。）

尝试用锚点限制正则表达式，即使只是 $ 最后，也会失败。这打开了意外排除其他模块的风险（例如 "xfs-extra"、"fs-extract" 等），但我还没有想出魔术。

最后，如果你只需要这个配置应用到单页应用，而不是其他类星体模式，你可以这样写：

build: {
  ...
  extendWebpack (cfg) { 
    if(ctx.mode.spa){
      cfg.module.rules.push({
        test: /(fs-extra|graceful)/,
        loader: "null-loader"
        })
      }
  ...

旁白： 我猜 ignorePlugin() 是我想要的是错误的（或者这可能是另一种方法？？）。另一个让人分心的是设置 cfg.node['fs-extra']='empty' 或 cfg.node=false 或任何一百种变体。它正在被使用，因为更改它会更改错误消息。但是即使 "empty" 应该创建一个空对象，它仍然会尝试读取它和它的所有依赖项，所以最终还是会报错。

如何忽略例如Quasar 的 webpack 中的 "fs" 模块

How to ignore e.g. the "fs" module in Quasar's webpack

webpack

quasar-framework