Question

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

当我运行yarn quasar dev并以Chrome启动时，出现以下错误：

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()调用，就好像我注释掉了一样，该Web应用程序在Firefox和Chromium中都可以使用。）

所以，我在考虑是否让webpack忽略'fs-extra'模块，这个问题可能会消失吗？

我想webpack offers ignorePlugin正是这种东西？

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

顺便说一句，有问题的模块使用require()和module.exports=...，为了更进一步，我基于阅读https://stackoverflow.com/a/52415747/841830，将babel.config.js更改为如下所示： / p>

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

这就是说，每当它尝试使用模块名称中带有 anywhere 字符串的模块加载模块时，请使用null-loader禁止显示它。

测试工作上的一些变化。即使我仅使用的模块直接直接加载fs-extra，也不会优雅地加载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或任何一百种变化形式。正在使用，因为对其进行更改会更改错误消息。但是，即使“空”应该做成一个空对象，它仍然会尝试读取它及其所有依赖项，因此最终还是会抱怨。

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

1 个答案: