macOS端React的项目WebPack热更新(HMR)失效问题分析及解决,原因竟是Windows文件系统不区分大小写导致
创始人
2024-03-03 00:40:11
0

项目场景:

最近做的项目是一个使用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博客

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...