Yarn 2 / Webpack требует. разрешить "использовать" массив UseEntry не удается ссылаться на загрузчик

#webpack #yarnpkg #webpack-5 #yarnpkg-v2

Вопрос:

Я пытаюсь перейти на 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) — Каталина

node -v: v15.3.0

yarn —версия: 2.4.0

webpack: ~ 5.9.0

1. Я нашел этот код ошибки здесь: yarnpkg.com/getting-started/migration#before-we-start , возможно , это стоит прочитать .

2. Я прочитал этот код ошибки в документах, и, к сожалению, он бесполезен. Выполнение того, что рекомендуется, не решает проблему. Похоже require.resolve , что это не работает, когда вы используете несколько распознавателей.

3. Я считаю , что это просто Ошибка doctor … Регистрация проблемы в системе отслеживания ошибок Berry должна решить эту проблему. Чек находится здесь: github.com/yarnpkg/berry/blob /…

Ответ №1:

Это ошибка в @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 внешних локальных переменных функции.