package.json和npm install、cnpm install 的問題

时间:2023-03-08 22:25:05
package.json和npm install、cnpm install 的問題

問題:最近使用cnpm安装项目依赖后,运行项目出现样式错乱问题。

描述:最近项目开发,需求参插了很多个版本,所以在前端项目的主干上拉好几套分支代码。拉的分支并不会把node_modules也拉过去,所以只能重新安装cnpm install。运行项目发现一个很严重的bug,一些样式没有生效,导致一些功能没办法正常使用。然后就开始找问题,发现主干上(还是原来的node_modules)的代码运行是没有问题,那么应该是cnpm install的安装的node_modules依赖出现问题了,然后我又用npm install安装了一遍,运行后样式还是错乱的。

我将分支上的node_modules和主干上的node_modules进行对比,发现版本不一样!!!

package.json和npm install、cnpm install 的問題

但是,我又对比了主干和分支的package.json ,发现里面的版本信息都是一样的 "vue-loader": "^13.0.4", 按道理node_modules也一样才对呀???为什么呢?

解决过程:那么我们现在来研究两个问题

1、package.json 版本信息

2、cnpm install和npm install 的安装区别

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

一、package.json 版本信息

1、版本的格式

major.minor.patch

主版本号.次版本号.修补版本号

————————————————————

patch:修复bug,兼容老版本

minor:新增功能,兼容老版本

major:新的架构调整,不兼容老版本

补丁中的更改表示不会破坏任何内容的错误修复。 次要版本的更改表示不会破坏任何内容的新功能。 主要版本的更改代表了一个破坏兼容性的大变化

2、版本指定

  • version

    必须匹配某个版本

    如:1.1.2,表示必须依赖1.1.2版

  • ^version

    兼容某个版本

    版本号中最左边的非0数字的右侧可以任意

    如果缺少某个版本号,则这个版本号的位置可以任意

    如:^1.1.2 ,表示>=1.1.2 <2.0.0,可以是1.1.2,1.1.3,.....,1.1.n,1.2.n,.....,1.n.n

    如:^0.2.3 ,表示>=0.2.3 <0.3.0,可以是0.2.3,0.2.4,.....,0.2.n

    如:^0.0,表示 >=0.0.0 <0.1.0,可以是0.0.0,0.0.1,.....,0.0.n

  • ~version

    大概匹配某个版本

    如果minor版本号指定了,那么minor版本号不变,而patch版本号任意

    如果minor和patch版本号未指定,那么minor和patch版本号任意

    如:~1.1.2,表示>=1.1.2 <1.2.0,可以是1.1.2,1.1.3,1.1.4,.....,1.1.n

    如:~1.1,表示>=1.1.0 <1.2.0,可以是同上

    如:~1,表示>=1.0.0 <2.0.0,可以是1.0.0,1.0.1,1.0.2,.....,1.0.n,1.1.n,1.2.n,.....,1.n.n

  • >version

    必须大于某个版本

    如:>1.1.2,表示必须大于1.1.2版

    >=version

    可大于或等于某个版本

    如:>=1.1.2,表示可以等于1.1.2,也可以大于1.1.2版本

    <version

    必须小于某个版本

    如:<1.1.2,表示必须小于1.1.2版本

    <=version

    可以小于或等于某个版本

    如:<=1.1.2,表示可以等于1.1.2,也可以小于1.1.2版本

  • x-range

    x的位置表示任意版本

    如:1.2.x,表示可以1.2.0,1.2.1,.....,1.2.n

  • *-range

    任意版本,""也表示任意版本

    如:*,表示>=0.0.0的任意版本

  • version1 - version2

    大于等于version1,小于等于version2

    如:1.1.2 - 1.3.1,表示包括1.1.2和1.3.1以及他们件的任意版本

  • range1 || range2

    满足range1或者满足range2,可以多个范围

    如:<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0,表示满足这3个范围的版本都可以

  • latest 当前发布版本。
    这是一个标记(tag,详见 dist-tag |npm Documentation),默认情况下 npm install 安装的就是这个 latest 标记。 常见的标记还有 next stable beta canary

感谢 @钱天兵 https://www.cnblogs.com/wshiqtb/p/6395029.html

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

因为 package.json中的"vue-loader": "^13.0.4",所以安装的是 >=13.0.4 <14.0.0,所以安装了13.7.2这个版本。

那么我只能用最笨的办法,就是对照package.json 里面的依赖,对照主干上的node_modules上的版本,去更新package.json 例如"vue-loader": "^13.0.4"  ===》"vue-loader": "13.0.4"  指定安装某个版本。然后 npm install ,再次运行,发现样式错乱的问题解决了。

发现生成了一个package-lock.json 文件。下一篇文章,再研究一下package-lock.json 和package.json 的区别。现在研究一下cnpm和npm 的区别先。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

二、cnpm install和npm install 的安装区别

  • cnpm:优点是速度快,缺点是没办法保证每个同事安装依赖的时候版本一致,就会出现依赖升级不兼容性问题
  • npm:优点是通过package-lock.json文件能够锁定版本,缺点是安装速度慢。

cnpm install 安装的包会在 node_modules 里创建两个文件夹,其中一个是另一个的引用,这样就会导致项目依赖比较多的时候 node_moduels 里有很多引用目录。

package.json和npm install、cnpm install 的問題

而 npm install 则不是这样

package.json和npm install、cnpm install 的問題