Webpack 5 polyfill 如何使用 Yarn 2 PnP 解析? (赛普拉斯问题)
How can Webpack 5 polyfills resolve with Yarn 2 PnP? (Cypress issue)
我 运行 在将 cypress-dark(主题)插件添加到 Yarn 2 工作区的“测试”包的上下文中解决了这个问题,但我认为这个问题是普遍的。为了更好地说明原始问题,我 认为 我需要知道的是:如何获得 Webpack 的 resolve.fallback 选项来使用 PnPWebpackPlugin?
为了在 Cypress 中使用 Webpack 5,我一直在使用 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,而不是在“测试”的根目录中我来自 运行 Cypress 的(工作区的)包。所以好像
{resolve: fallback: { path: require.resolve('path-browserify')}
在 webpackOptions 中回退到一些不知道 PnPWebpackPlugin 的解决方案。那就是我被困的地方。任何指导将不胜感激:)
事实证明,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'));
我 运行 在将 cypress-dark(主题)插件添加到 Yarn 2 工作区的“测试”包的上下文中解决了这个问题,但我认为这个问题是普遍的。为了更好地说明原始问题,我 认为 我需要知道的是:如何获得 Webpack 的 resolve.fallback 选项来使用 PnPWebpackPlugin?
为了在 Cypress 中使用 Webpack 5,我一直在使用 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,而不是在“测试”的根目录中我来自 运行 Cypress 的(工作区的)包。所以好像
{resolve: fallback: { path: require.resolve('path-browserify')}
在 webpackOptions 中回退到一些不知道 PnPWebpackPlugin 的解决方案。那就是我被困的地方。任何指导将不胜感激:)
事实证明,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'));