0

我正在尝试升级到 yarn 2，但在“使用”基于数组的加载器和正确解析方面遇到了一些障碍。

这是之前工作的 webpack 配置的摘录。

...
{
  test: /\.(gif|png|jpeg|jpg|svg)$/i,
  include: path.resolve(__dirname, "./static/images"),
  use: [
   "file-loader",
   {
     loader: "image-webpack-loader",
     options: {
       mozjpeg: { progressive: true },
       gifsicle: { interlaced: true },
       optipng: { enabled: false },
       pngquant: { enabled: false }
     }
   }
 ]
},
...

运行yarn dlx @yarnpkg/doctor返回以下错误消息。

assets/webpack.common.js:33:14: Webpack configs from non-private packages should avoid referencing loaders without require.resolve

第 33 行第 14 列是“使用”键的左括号字符。

当我将加载器字符串包装在 a 中时require.resolve(...)，从 yarn doctor 命令中得到了相同的错误。

有谁知道为什么这里有问题解决？根据 webpack 的文档，这应该完全没问题，但我不确定哪个工具在这里遇到了困难。

https://webpack.js.org/configuration/module/#ruleuse

环境：OSX：10.15.7 (19H15) - Catalina

节点-v：v15.3.0

纱线--版本：2.4.0

网络包：~5.9.0

4

1 回答 1

0

这是 中的一个错误@yarnpkg/doctor，该错误位于此代码块： https ://github.com/yarnpkg/berry/blob/6b9df772ac785f73e6d08f0fc8c3f1718f296671/packages/yarnpkg-doctor/sources/cli.ts#L157-L159

if (name === `use` || name === `loader`) {
  checkForUnsafeWebpackLoaderAccess(workspace, property.initializer, {configuration, report});
}

use上面的代码块将属性的值loader视为对加载器的引用，但它不处理数组，在您的情况下use是数组。

解决这个问题的第一个天真的镜头@yarnpkg/doctor是将上面的块更改为：

if (name === `use` || name === `loader`) {
  if (property.initializer.kind === ts.SyntaxKind.ArrayLiteralExpression) {
    ts.forEachChild(property.initializer, childNode => {
    if (childNode.kind !== ts.SyntaxKind.ObjectLiteralExpression) {
        checkForUnsafeWebpackLoaderAccess(workspace, childNode, {configuration, report});
      }
    });
  } else {
    checkForUnsafeWebpackLoaderAccess(workspace, property.initializer, {configuration, report});
  }
}

上面的代码块处理数组loader和use属性的方式是通过访问项目并对每个不是对象文字的项目运行医生检查，对象文字将在processNode函数递归期间处理。数组的这种特殊分支需要以特殊方式处理非对象文字数组项 - 作为加载器引用。

这只是实现它的一种方式，另一种可能的方式是记住我们在内部迭代loader，外部函数局部变量use中的数组。processFile

于 2020-12-08T18:21:13.213 回答