其实用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。

引用知乎@周载南的回答

根据官方文档,这个package-lock.json 是在 `npm install`时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。

它有什么用呢?因为npm是一个用于管理package之间依赖关系的管理器,它允许开发者在pacakge.json中间标出自己项目对npm各库包的依赖。你可以选择以如下方式来标明自己所需要库包的版本

这里举个例子:

"dependencies": {
 "@types/node": "^8.0.33",
},

这里面的 向上标号^是定义了向后(新)兼容依赖,指如果 types/node的版本是超过8.0.33,并在大版本号(8)上相同,就允许下载最新版本的 types/node库包,例如实际上可能运行npm install时候下载的具体版本是8.0.35。波浪号

大多数情况这种向新兼容依赖下载最新库包的时候都没有问题,可是因为npm是开源世界,各库包的版本语义可能并不相同,有的库包开发者并不遵守严格这一原则:相同大版本号的同一个库包,其接口符合兼容要求。这时候用户就很头疼了:在完全相同的一个nodejs的代码库,在不同时间或者不同npm下载源之下,下到的各依赖库包版本可能有所不同,因此其依赖库包行为特征也不同有时候甚至完全不兼容。

因此npm最新的版本就开始提供自动生成package-lock.json功能,为的是让开发者知道只要你保存了源文件,到一个新的机器上、或者新的下载源,只要按照这个package-lock.json所标示的具体版本下载依赖库包,就能确保所有库包与你上次安装的完全一样。

原来package.json文件只能锁定大版本,也就是版本号的第一位,并不能锁定后面的小版本,你每次npm install都是拉取的该大版本下的最新的版本,为了稳定性考虑我们几乎是不敢随意升级依赖包的,这将导致多出来很多工作量,测试/适配等,所以package-lock.json文件出来了,当你每次安装一个依赖的时候就锁定在你安装的这个版本。

那如果我们安装时的包有bug,后面需要更新怎么办?

在以前可能就是直接改package.json里面的版本,然后再npm install了,但是5版本后就不支持这样做了,因为版本已经锁定在package-lock.json里了,所以我们只能npm install xxx@x.x.x  这样去更新我们的依赖,然后package-lock.json也能随之更新。

假如我已经安装了jquery 2.1.4这个版本,从git更新了package.json和package-lock.json,我npm install能覆盖掉node_modules里面的依赖吗?

其实我也有这个疑问,所以做了测试,在直接更新package.json和package-loc.json这两个文件后,npm install是可以直接覆盖掉原先的版本的,所以在协作开发时,这两个文件如果有更新,你的开发环境应该npm install一下才对。

[转] package-lock.json的更多相关文章

  1. vue.config.json CopyWebpackPlugin 没有生效

    本地生效,服务器不生效. 因为是jenkinis构建,没有留意到报错.后来发现错误:ENOENT: no such file or directory, rename 解决方法就是:删除package ...

  2. 解决npm ERR!Unexpected end of JSON input while paring near (解析附近时JSON输入意外结束)'...."^2.0.0-rc.0","glob"'等npm install错误

    摘要 最近更新了一次node,但是更新后npm的命令总是会报 npm WARN deprecated fsevents@2.0.6: Please update: there are crash fi ...

  3. 详解package-lock.json的作用

    目录 详解package-lock.json package-lock.json的作用 版本号的定义规则与前缀对安装的影响 改动package.json后依旧能改变项目依赖的版本 当前项目的真实版本号 ...

  4. vue-cli中webpack配置详解

    vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...

  5. vue-cli脚手架中webpack配置基础文件详解

    一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wep ...

  6. Settings-Sync插件源码阅读

    一.介绍 请参考官网: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync 二.源码目录详解 Ima ...

  7. vue-cli 脚手架中 webpack 配置基础文件详解

    一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮 ...

  8. NPM cache相关

    今天下午把package.lock.json用别人的替换了,然后编译一堆报错,这个问题弄了一下午. 总结一下经验: 1.关于npm cache NPM会把所有下载的包保存,放在用户文件夹下面,在我的w ...

  9. 无缘无故出现npm 解析异常的的问题 解决方案

    npm cache clean --force try if false delete package.lock.json try again if false npm set registry ht ...

  10. 前端的标配:npm是什么及其安装(含cnpm)

    前端的标配:npm是什么及其安装 一:npm是什么及其来源 参考来源:npm是干什么的 总结:不需要去相关的网站下载依赖,用一个工具把这些依赖集中起来管理 NPM 的思路大概是这样的: 1)买个服务器 ...

随机推荐

  1. 【机器学习】--FP-groupth算法从初始到应用

    一.前述 二.构建FP_groupth数流程 1.扫描事务数据库D 一次.收集频繁项的集合F 和它们的支持度.对F 按支持度降序排序,结果为频繁项表L. 2.创建FP 树的根节点,以“null”标记它 ...

  2. FileUtils【获取SD卡根目录、读写文件、移动、复制、删除文件、获取文件名、后缀名操作类】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 封装了获取SD卡根目录路径.以及对文件读写.获取文件名等相关操作. 因为需要用到android.permission.READ_EX ...

  3. service相关

    本篇仍以问题为驱动 一.什么时Service? Service是Android程序中四大基础组件之一,它和Activity一样都是Context的子类,只不过它没有UI界面,是在后台运行的组件.Ser ...

  4. Tushare模块

    .TuShare简介和环境安装 TuShare是一个著名的免费.开源的python财经数据接口包.其官网主页为:TuShare -财经数据接口包.该接口包如今提供了大量的金融数据,涵盖了股票.基本面. ...

  5. C# WebRequest.Create 锚点“#”字符问题

    背景 在与后台API接口对接时,如将网页Url作为参数请求数据时,如果是锚点参数,则会丢失. 锚点参数 请求通过WebRequest.Create创建一个WebRequest: var uri = & ...

  6. day09 css

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. SpringBoot打包项目成war包,并部署到服务器的tomcat上

    最近遇到项目需要上线部署到服务器,需要讲自己的SpringBoot项目打包成war包,部署到tomcat上. 下面记录下打包部署的过程. (1) 将SpringBoot项目打包成war包, 一.修改打 ...

  8. Spring中关于AOP的实践之概念

    一.什么是AOP AOP:也称作面向切面编程 在分享几个概念执行我想先举个栗子(可能例子举得并不是特别恰当): 1.假如路人A走在大街上,被一群坏人绑架了: 2.警察叔叔接到报警迅速展开行动:收集情报 ...

  9. 微信小程序 picker 中range-key的坑

    <picker class='fr' bindchange="onChangeBuild" range-key="{{'num'}}" value=&qu ...

  10. vue中的tab栏切换内容变换

    <!DOCTYPE html> <html lang="cn-zh"> <head> <meta charset="UTF-8& ...