首页 > 其他分享 >Vue package-lock.json的作用

Vue package-lock.json的作用

时间:2024-05-02 15:55:21浏览次数:21  
标签:npm node Vue package lock json 版本

package-lock.json的作用

 

    "node_modules/@aashutoshrathi/word-wrap": {
      "version": "1.2.6",
      "resolved": "https://registry.npmmirror.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
      "dev": true,
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/@achrinza/node-ipc": {
      "version": "9.2.7",
      "resolved": "https://registry.npmmirror.com/@achrinza/node-ipc/-/node-ipc-9.2.7.tgz",
      "integrity": "sha512-/EvNkqB4HNxPWCZASmgrjqG8gIdPOolD67LGASvGMp/FY5ne0rbvpYg5o9x8RmgjAl8KdmNQ4YlV1et9DYiW8g==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@node-ipc/js-queue": "2.0.3",
        "event-pubsub": "4.3.0",
        "js-message": "1.0.7"
      },
      "engines": {
        "node": "8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19 || 20"
      }
    },

 

        "eslint-plugin-vue": "9.18.1",
        "less": "^4.0.0",
        "less-loader": "~8.0.0",

 

其实用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到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 [email protected] 这样去更新我们的依赖,然后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一下才对。


链接:https://www.jianshu.com/p/58f87a7a1420

标签:npm,node,Vue,package,lock,json,版本
From: https://www.cnblogs.com/emanlee/p/18006941

相关文章

  • 前端 Vue webpack配置之 webpack.config.js 文件配置
     Webpack在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个node.js模块,返回一个json格式的配置信息对象,或者通过 --config 选项来指定配置文件。.输入命令:webpack,即可按照webpack.c......
  • 前端 Vue-cli中 vue.config.js 的配置详解
    Vue-cli3/Vue-cli4 目录结构├──README.md #说明|--dist #打包后文件夹├──babel.config.js #babel语法编译├──package-lock.json├──public #静态文件夹,这类资源将会直接被拷贝,而不会经过webpack的......
  • 前端 Vue yarn.lock文件:详解和使用指南
    yarn.lock文件:详解和使用指南https://www.python100.com/html/38KF796X6BHM.html一、什么是yarn.lock文件yarn.lock文件是一个产生于Yarn0.22及以后版本的文件,它是一个自动生成的锁文件,记录了当前项目的依赖关系,并确保每个依赖的版本都是稳定的,这样可以保证软件包安装的重......
  • vite vue-cli 读取文件原始内容 使用base64内容的文件
    新建文件img.dataurl中存放图片base64<imgclass='img':src='dataurl'alt=''/>importdataurlfrom'./img.dataurl'data(){return{dataurl:dataurl}}vue.config.jsmodule.exports=defineConfig({configureWebpack:{......
  • dremio 读取 jsonl 格式支持
    实际上属于dremio社区一个问题,内部实际上是dremio对于格式化插件支持的问题,不少是基于文件格式硬编码的,尽管我们可以自定义格式化插件,但是对于已经支持的就有点不是很方便了,可以直接复用现有的,以下说明下修改以及处理直接修改JSONFormatPlugin代码支持jsonl参考如下Fo......
  • vue-基础
    渲染的范围<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><p>狂神说Java</p><!--view层模板--><divid="app&quo......
  • 在.npmrc中 unsafe-perm = true package-lock=false的作用
    在.npmrc配置文件中,unsafe-perm和package-lock的设置有各自的作用:unsafe-perm=true:此设置影响npm(或pnpm,如果使用该包管理器)在执行包脚本时的行为。默认情况下,当以root或具有管理员权限的用户身份运行npm安装命令时,npm会限制包脚本中的权限,避免以root身份执......
  • Vue列表过滤
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>列表过滤</title><......
  • Vue .eslintrc.js
    Vue .eslintrc.jshttps://blog.csdn.net/weixin_33721344/article/details/88685833 Vue的Eslint配置文件eslintrc.js说明与规则介绍 最近在跟着视频敲项目时,代码提示出现很多奇奇怪怪的错误提示,百度了一下是eslintrc.js文件没有配置相关命令,ESlint的语法检测真的令人抓......
  • Vue | babel.config.js 配置详解
    babel.config.js 1概述Babel相当于一个中介,一边是用户,另一边是浏览器。这几年,JavaScript发生了很大的变化,许多新特性在很多浏览器里都不支持。Babel的主要作用就是规避这些问题,可以确保JavaScript代码兼容所有的浏览器,比如IE11。2Babel的工作原理Babel使用AST把......