webpack - Webpack 5 polyfill 如何解决 Yarn 2 PnP 问题？ ( Cypress 问题)

Question

我在将 cypress-dark(主题)插件添加到 Yarn 2 工作区的“测试”包时遇到了这个问题，但我认为这个问题是普遍存在的。为了更好地阐述最初的问题，我认为我需要知道的是:如何获得 Webpack 的resolve.fallback 选项来使用 PnPWebpackPlugin？

为了将 Webpack 5 与 Cypress 一起使用，我一直在使用 cypress-webpack-preprocessor-v5。在 support/index.ts 中导入 cypress-dark 后，运行规范在浏览器中产生以下错误:

Error: Webpack CompLooked for and couldn't find the file at the following paths:resolve 'path' in '/home/john/Projects/current/djinndex-remastered/.yarn/cache/postcss-npm-7.0.16-2507f8c3e2-b867411523.zip/node_modules/postcss/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

因此，我添加了

resolveLoader: {
        plugins: [PnpWebpackPlugin.moduleLoader(module)],
},

到我的plugins/index.ts，如下所示:

/**
 * @type {Cypress.PluginConfig}
 */
//@ts-ignore
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  const options = {
    webpackOptions: {
      ...require('../../../client/webpack/webpack.cypress.js'),
      resolve: {
        plugins: [PnpWebpackPlugin],
        extensions: ['.ts', '.js'],
        fallback: { path: require.resolve('path-browserify') },
      },
      resolveLoader: {
        plugins: [PnpWebpackPlugin.moduleLoader(module)],
      },
      module: {
        rules: [
          {
            test: /\.ts$/,
            exclude: [/node_modules/],
            use: [
              {
                loader: 'ts-loader',
              },
            ],
          },
        ],
      },
    },
    watchOptions: {},
  };
  on('file:preprocessor', webpackPreprocessor(options));
};

运行规范会产生以下错误:

cypress_runner.js:199777 AssertionError: Timed out retrying: `cy.readFile("dark.css")` failed because the file does not exist at the following path:

`/home/[.../<workspace>/]packages/test/dark.css`

Because this error occurred during a `before all` hook we are skipping all of the remaining tests.
    at Context.eval (http://localhost:3000/__cypress/tests?p=cypress/support/index.ts:3280:8)

Webpack 应该在/.yarn/cache/cypress-dark-npm-1.7.14-295ea64c64-9b608eccac.zip 的 Yarn 2 虚拟包中查找 dark.css，而不是在“test”的根目录中我运行 Cypress 的(工作区)包。所以看起来像

{resolve: fallback: { path: require.resolve('path-browserify')} 

在 webpackOptions 中回退到一些不知道 PnPWebpackPlugin 的解决方案。这就是我被困住的地方。任何指导将不胜感激:)

Answer 1

事实证明，Webpack 5 的路径 polyfill 在 Yarn 2 上运行良好。问题是包本身 cypress-dark 专门寻找一个 node_modules 目录:

? join('node_modules/cypress-dark/src')

所以，这是个好消息。对于其他 Yarn 2 用户，为了避免 node_modules 问题，我最终只是在 cypress/support/theme/index.ts 本地重新创建了 cypress-dark 插件的简化版本:

import postcss from 'postcss';
//@ts-ignore
import cssVariables from 'postcss-css-variables';

const getHead = () => Cypress.$(parent.window.document.head);
const $head = getHead();
const isStyleLoaded = ($head: JQuery<HTMLHeadElement>) =>
  $head.find('#cypress-dark').length > 0;

const convertCssVariables = (mycss: any) =>
  postcss([cssVariables()]).process(mycss).css;

export const loadTheme = (theme: string) => {
  return () => {
    const $head = getHead();
    if (isStyleLoaded($head)) {
      return;
    }

    const themeFilename = `${theme}.css`;

    cy.readFile(themeFilename, { log: false })
      .then(convertCssVariables)
      .then((css) => {
        $head.append(
          `<style type="text/css" id="cypress-dark" theme="${theme}">\n${css}</style>`
        );
      });
  };
};

我将 dark.css 复制到 cypress/support/theme (并进行了一些个人偏好调整)。然后我在 cypress/support/index.ts 中调用了 loadTheme("dark"):

import { loadTheme } from './theme';
before(loadTheme('dark'));