一.起因
在一个A模块引入某个组件B的时候,本地起服务调试,发现一个比较奇怪的事情:这个B组件本身依赖一个第三方库(简称P v2),而模块A本身也依赖了P(v1),但他们依赖的是不同版本的P,按照npm依赖包管理规则,B组件会优先查找它内部node_modules中的P(v2),当找不到时,才会去外层node_modules去查找P(v1),理论上这是正常的,同事的电脑上也是按这个理论执行的,但是!我的电脑本地起服务时,就出现了问题,好像B组件并不会优先查找内部的P(v2),而是直接使用的是外层node_modules中的P(v1),由于B组件应该使用v2,却查找到了v1,版本不一致,就报了错误。这个问题很是头疼!
这篇解锁npm包管理,很详细:https://www.cnblogs.com/wonyun/p/9349691.html
http://www.alloyteam.com/2016/03/master-npm/
二.探索
先对比同事电脑和我本机的npm版本,同事6.4.1,我5.x,好像低了,但应该也不会是这个问题啊,不管怎样先升级在说吧
npm install -g npm@版本号,然后测试,还是不行,在看node版本号,我的还是低了,再升级,这篇写的比较详细:https://blog.csdn.net/guzhao593/article/details/81712016,升级过程中发现n竟然不能在windows上使用!
windows下需要升级nodejs 仅仅需要安装最新的msi 。下载地址:https://nodejs.org,注意自己原来是安装在 Program Files (x86) 还是 Program Files,需要与原来文件夹保持一致,升级完成,还是不行!!!到此崩溃,继续探索,继续补充。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
今天不甘心,继续摸索,首先,感觉只要npm node.js版本不是太老,应该不会是这些版本的原因造成的,今天决定研究打包后的文件vendor.bundle.js,这个ng build后在dist目录下生成的文件,里面包含编译后的代码以及第三方各种依赖包路径。
首先说一下我使用的是vs code,我进行编译或者本地起服务时都是在编译器中的控制台进行的,如下界面:
我要研究的就是上图标记的这个文件,根据报错信息,找到了代码中引入这个第三方库P的地方,然后根据关键字在vendor.bundle.js中搜索:
现在问题明朗很多了,我的本地环境只所以报错,是因为编译后生成的vendor.bundle.js中,这个第三方库的路径寻找错误!这个错误路径就是在外层node_modules中寻找的,而正确的路径应该是这个样子的:
这个路径才是正确的,是应该从这个组件内部的node_modules中寻找这个库,至此,可以明确,确实是我本地编译的问题,因为我每次编译都是在vs code中直接编译的,这次为了改变测试条件,我选择直接用本地cmd编译:
然后,奇迹就出现了,首先我发现编译生成的vendor.bundle.js文件大小已经发生变化,大小不一样,内容肯定也不同吧,打开查看,鸡冻了半天!这次依赖路径终于正确啦!然后本地cmd直接起服务,成功!没有任何报错!反复几次对比,确实在本地cmd和在vs code中编译存在差异,两者编译结果确实不同,所以,这也给我比较大的启示,不能犯经验主义错误,不是说以前用vs code编译没有错,就代表一直不会出错,就像这次!所以使用本地cmd可能要更保险一些!
总结:这次终于找到原因了,也在摸索过程中学到很多东西,不过这次并没有找到根本原因,为什么这次编译用vs code就出现问题了呢,在编译过程中,哪里出了问题,这个有时间还会继续研究,是不是和vs code版本有关系呢?下次待升级版本验证!
另外,编译的时候没有做任何优化,导致vendor.bundle.js文件异常的大!甚至达到了20多M,这个会严重影响界面加载速度,接下来,关于界面加载性能优化慢慢摸索总结!路漫漫其修远兮,吾将上下而求索!
此外,期间找到一些删除node_modules文件夹的方式记录:cnpm install rimraf -g rimraf node_modules
链接:https://blog.csdn.net/WU5229485/article/details/82985205
这个rimraf删除工具要提前安装,另外,网上很多这个删除指令rm -rf node_modules/,这个在windows系统好像是用不了的!