小编Rav*_*han的帖子

Webpack [url/file-loader]没有解析URL的相对路径

我在Webpack中遇到了关于相对路径的问题.让我试着解释一下这个场景:

我在Workspace目录中有2个单独的项目:

  1. Project-A [使用Gulp捆绑]:稳定和工作
  2. Project-B [使用Webpack捆绑]:新项目

由于两个项目都使用相同的样式,所以我想将项目A的SCSS文件[由标准变量,预定义布局,模态,类等组成]重用到项目B中.

在此输入图像描述

现在,如果我尝试在Project-B index.scss中导入Project-A index.scss作为另一部分[ 注释掉背景图像URL依赖性 ],webpack能够生成所需的CSS输出文件.

// Import Project A SCSS [Common Varibles, Classes, Styling etc] 
@import "../../../../Project_A/assets/stylesheets/index";
Run Code Online (Sandbox Code Playgroud)

但是,由于Project-A的index.scss进一步引用了相应Relative-Path的背景图像,因此webpack构建会抛出错误

'在XYZ/Project-B/Source/Stylesheets中找不到文件/目录'.

确切的错误块:

./src/assets/stylesheets/index.scss中的错误模块构建失败:ModuleNotFoundError:找不到模块:错误:无法解析'file'或'diWorkSpace\Project_B\src\assets\stylesheets

截图: **在此处输入图片说明**

我无法理解为什么Webpack无法解决Project-A中的资产的相对路径并且仍在查看"项目B"内部.

以下是模拟问题的Code-Repo URL:https: //github.com/raviroshan/webpack-build-issue/tree/master/WorkSpace

重现步骤.

  1. 下载回购.
  2. 在Project_B文件夹中浏览,然后进行NPM安装.
  3. 运行'webpack'.当相对图像URL代码被注释掉时,它将正确构建.
  4. 现在放回注释的代码行:https: //github.com/raviroshan/webpack-build-issue/blob/master/WorkSpace/Project_A/assets/stylesheets/index.scss#L27

javascript urlloader reactjs webpack webpack-style-loader

10
推荐指数
1
解决办法
9429
查看次数

禁用Redux-Form字段时删除验证

我正在使用Redux表单v6.5.0并且要求 在禁用的props传递为true时删除任何Field的验证.

我编写了一个自定义逻辑来禁用自定义字段组件的render()内部的验证,但看起来即使手动更新值后,也没有在表单上调用updateSyncErrors().因此,syncErrors对象会持久化字段验证错误.

    if (field.disabled) {
        field.meta.invalid = false;
        field.meta.error = undefined;
        field.meta.valid = true;
    }
Run Code Online (Sandbox Code Playgroud)

我们能否有一些直接的 - 简单和更好的方法来解决这个问题并修复这个问题?

redux-form

6
推荐指数
1
解决办法
953
查看次数

Chrome 与 Web Vitals 上的 TTFB 值不同

我注意到 Chrome 网络选项卡中的 TTBF 值与 WebVitals 记录的 TTBF 值不同。理想情况下,它应该是完全相同的值,但有时在某些情况下会出现高达 2-3 秒的巨大差异。

我正在使用 Next.js 并使用reportWebVitals来记录各自的性能指标。

这是一个示例存储库应用程序 URL和屏幕截图供参考。

使用performance.timing.responseStart - performance.timing.requestStart返回比依赖 WebVitals TTFB 值更合适的值。

知道可能出了什么问题吗?这是 WebVitals 上的一个错误,我不应该使用它,或者在消费/记录值时犯错误?

在此输入图像描述 在此输入图像描述

web-performance next.js time-to-first-byte web-vitals

1
推荐指数
1
解决办法
379
查看次数