macOS端React的项目WebPack热更新(HMR)失效问题分析及解决,原因竟是Windows文件系统不区分大小写导致

项目场景:

最近做的项目是一个使用UmiJS搭建的React的前端老项目,项目是上一个开发团队遗留下来的老项目,我们接着在原来的基础上开发。团队成员中有的是Windows电脑,有的是Mac电脑,所以存在规范不统一的情况。


问题描述

在MacOS系统上,项目中有的文件的热更新无效,有的却可以,有点奇怪。而Windows系统上却全都可以热更新。之前一直以为是项目框架的问题,而实际上不是。是项目中Git仓库里存在两个同名但大小写不一样的两个文件夹。


原因分析:

最后用排除法确定到是文件夹大小写问题导致的,因为linux系统和Unix系统都是严格区分大小写,而Windows系统不区分大小写。

例如:在xxx.jsx文件中引入以下文件Level.jsx文件,

import Level from '@/pages/test/component/Level'
import Level from '@/pages/Test/component/Level'

这两个路径在Windows系统中项目的热更新都是会生效的,而如果在linux或者Unix系列的MacOS上就严格区分了,热更新就无效了。其实根本的原因是存在了两个文件夹。去查看Git的仓库确实发现两个一样的文件夹,只是有的大写,有的小写。并且在代码中引入时没有不管大小写问题,导致WebPack找不到文件,无法进行监听。webpack的热更新原理图如下:


解决方案:

合并文件夹,严格区分大小写,文件中引入时也是严格按照实际的文件名引入。

在idea中重命名文件夹,比如:test重命名成Tests,然后提交代码,Git会把test的删除,新增Tests的文件夹,这时仓库中就只有一个了,之前的两个文件夹test、Test都会被删除,然后在把Tests的这个文件夹名称重命名成Test的,代码中的引用也全都改成严格大小写的。webpack的热更新就生效了。

简单备份下你将要重命名的文件,然后先删除,提交,再将刚才的备份文件复制进来,修改文件名即可。这样 git 就会认为你先删除了一个文件,然后再添加了一个新文件。

扩展知识:

由于Windows文件系统不区分大小写,所以你不能通过大小写来区分文件名或文件夹名,比如你在资源管理器中新建一个A.txt文件,想再建个a.txt时会提示你重名并自动重命名。这在Git操作时可能会遇到问题,比如你代码库里文件或文件夹修改了名称,默认Git认为是没变的,如果单纯让Git在仓库中区分大小写会产生两份文件并且无法在Windows系统中观察到),如果要解决这个问题一般需要两次提交:

先改名或删除提交,然后再修改提交。

先提交删除,再提交添加

简单备份下你将要重命名的文件,然后先删除,提交,再将刚才的备份文件复制进来,修改文件名即可。这样 git 就会认为你先删除了一个文件,然后再添加了一个新文件。

据说 Windows 是为了兼容 Dos,才没有区分大小写,后续就一直不区分了。

Linux 则是一直区分大小写的。Mac 则可以在制作分区时选择此分区是否要区分大小写。

Win10 引入了 WSL,如上所述 Linux 是需要区分大小写的,为此微软给  NTFS 文件系统加了个 SetCaseSensitiveInfo 标志,可以支持在文件夹级别启用或禁用。

启用之后,Windows 程序也可以对这个文件夹下的文件区分大小写了。

参考文献:

0、Windows 不区分大小写 - 走看看

1、解决 git 对重命名文件名大小写不敏感的问题_曾经去过跨越一个小时的地方的博客-CSDN博客

猜你喜欢

转载自blog.csdn.net/qq_35624642/article/details/128109031
今日推荐