背景:
最近使用React+Redux做项目,但是避免不了要用到JQuery,于是就JQuery引入到项目。但是在使用了一段时间后,发现浏览器的控制台出现 “There are multiple modules with names that only differ in casing.” 警告,虽然这个不影响项目,但是看着有点不舒服。
告警信息:
./node_modules/jQuery/dist/jquery.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* E:\Workspace\***_project\node_modules\jQuery\dist\jquery.js
Used by 5 module(s), i. e.
E:\Workspace\***_project\node_modules\babel-loader\lib\index.js??ref--8-0!
E:\Workspace\***_project\node_modules\af-webpack\node_modules\eslint-loader\index.js??ref--5-0!E:\Workspace\***_project\\src\pages\servers_info\index.js
* E:\Workspace\***_project\node_modules\jquery\dist\jquery.js
Used by 39 module(s), i. e.
E:\Workspace\***_project\node_modules\babel-loader\lib\index.js??ref--8-0!
E:\Workspace\***_project\node_modules\af-webpack\node_modules\eslint-loader\index.js??ref--5-0!
E:\Workspace\***_project\src\pages\activex\Player.js
上面错误信息大概意思 “项目中jquery被多个模块使用,但是它们引入jquery时没有区分大小写(有的模块使用jquery,有的模块使用JQeury),这可能导致在具有区分大小写的文件系统上编译时出现意想不到的行为。”
解决办法:
找到所有使用了jquery的模块,将jquery引入改成统一的名称。如下:
/**
* 修改之前
*/
// 模块A
import $ from 'jquery';
// 模块B
import $ from 'jQuery';
// 模块C
import $ from 'JQuery';
/**
* 修改之后
*/
// 模块A
import $ from 'jquery';
// 模块B
import $ from 'jquery';
// 模块C
import $ from 'jquery';