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博客