解决npm安装依赖和package.json定义版本不一致

 

前言

 

   2021年搭了项目的脚手架(fd)，春节前cnpm install的时候还可以启动，但是春节后，重新cnpm install，发现项目启动报错了。奇怪，项目代码和之前一样，一点都没改动。 难道是新型冠状病毒感染了？ 

 

 

1. 代码分析定位原因 ，less 代码报错

 

折腾了很长时间时间，删除代码对比，然后最终定位工程结构中此行代码导致了报错  

 

```

<style lang="less">

  @import "./css/index.less";

</style>

 

```

2. less 分析 

 

package.json 。  less版本为3.9.0，  但是找到 node_modules中的less 版本为 3.11.1

是不是很奇怪？ 

竟然不是我们定义的版本， 查找之前的项目，同样找到 node_modules目录中的less， 此处的版本无任何问题，

将原来的项目的中依赖，复制到现在的项目，项目照常启动。   

 到此圆满解决问题。      

 

3.  结论

 

 

npm或者cnpm 安装依赖，不会完全按照package.json中的版本号来，会有稍微的差异，这样的差异可能导致项目起不来，或者报错， 因为某些包只有特定的版本才能正常运行。

 

 

4.  解决根源

 

上述问题根源其实是到底就是如何让依赖的安装和 package.json中定义的一样。  

 

 经过一番查找，解决此问题有以下方案。         

1.  npm提供了shrinkwrap命令来解决这个问题。 在项目所有依赖都安装完后，项目可正常稳定运行时，再运行如下命令：

 npm shrinkwrap 

此时会生成一个  npm-shrinkwrap.json  文件， 此文件会锁定所有的依赖来源， 后期再执行 cnpm  install  或者 npm  install  都不会出错，包的版本会和  package.json 中定义的一样。

 

注意： 如果之后安装了其他包， npm-shrinkwrap.json  文件 不会自动更新，所以需要再次执行   npm shrinkwrap 

 

 

 2. 将node版本升级到 10+， npm 升级到 6+ ， 在执行 npm  install  操作时，  node会动态生成 package-lock.json，  这样其他人再用 npm安装时，包的版本会和  package-lock.json 中定义的一样。

 

注意： 采用cnpm 安装依赖会忽略 package-lock.json ， 所以建议将 npm 的地址直接指向taobao镜像， npm 可以采用 nrm管理。

 

 

亲测：

上述版本不会自动生成    package-lock.json  。

 

升级到以下版本可以

 

 

3.  采用  yarn 安装依赖， 此操作未测试， yarn  初次安装速度相比淘宝 太慢！ 各位可以自行测试！