一篇文章讲清楚关于package.json几点让人迷惑的知识点,建议收藏

简介: 一篇文章讲清楚关于package.json几点让人迷惑的知识点,建议收藏

持续就是力量,抓紧'今天' 一天,认真地过日子。假如每天都努力工作,并设法改变一些事情,或许就能预见明日的光景。一天天累积起来的就已非常可观,5年,10年后的成就必然会辉煌。

--出自《稻盛和夫给年轻人的忠告》


关注一下 知码前端 公众号,分享给您新的、有用的前端和后端知识

前言

上一篇文章写了关于在命令行中输入 `npm run xxx` 之后,系统为我们做了哪

些工作,以及背后的基本原理是怎么样的。

接下来,我们继续说一下关于 package.json 的几点知识。本来这篇文章是打

算详细讲一下package.json的详情用法的,不过我觉得大家可能都已经对其

用法比较明白了。

所以我们这篇文章重点讲一下关于package.json几个比较重要和让人迷的知识点。


package.json 和 package-lock.json两个文件的区别

众所周知,当我们运行完 `npm install` 命令之后,在生成两个比较重要的文件和文件夹:package-lock.json 和 node_modules。

对于 packags.json 我们都已经比较了解了,它主要是描述我们项目或者模块的一个清单文件。这个文件是不能缺少的。那么 package-lock.json是干什么的呢。我们简单看一下里面的内容

{
  "name": "work-p-site",
  "version": "0.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "work-p-site",
      "version": "0.0.0",
      "dependencies": {
        "normalize.css": "^8.0.1",
        "vue": "^3.2.16",
        "vue-router": "^4.0.12"
      },
      "devDependencies": {
        "@vicons/ionicons5": "^0.11.0",
        "@vitejs/plugin-vue": "^1.9.3",
        "naive-ui": "^2.24.0",
        "sass": "^1.43.3",
        "sass-loader": "^12.2.0",
        "typescript": "^4.4.3",
        "vfonts": "^0.1.0",
        "vite": "^2.6.4",
        "vite-plugin-components": "^0.13.3",
        "vue-tsc": "^0.3.0"
      }
    },
}

当然这里面的内容是非常多的,我已经删除了很多很多,大约有 3000+ 行。我们发现和 package.json 长的很像,但也不完全一样(废话,完全一样,要这个文件干啥)

简单一句话就是:

它可以锁定我们的版本号和依赖信息,而且一定要提交到git上。这样我们下次就可以使用它安装依赖。从而保持每个机器上或者每个开发人员的手上用的依赖都是一样的。

它是 npm 自动为我们安装生成的,所以我们不平时不需要修改,只要注意一下就把它添

加到版本管理中就好。


package.json中的依赖版本号开头符号是什么意思

先来看一下我们平时用的依赖长什么样:

"dependencies": {
    "axios": "0.21.0",
    "clipboard": "^2.0.8",
    "core-js": "^3.6.5",
    "echarts": "^5.0.2",
    "element-china-area-data": "~5.0.2",
    "element-ui": ">=2.14.1",
    "font-awesome": "^4.7.0",
    "js-cookie": "^2.2.1",
    "marked": "^2.0.3",
    "mockjs": "^1.1.0",
    "normalize.css": "^8.0.1",
  },

可以看到版本号之前符号挺多有的还没有符号。下面我们重点说一下都是什么意思:

  • 没有指定特殊符号
"xxxxx": "1.0.0"

在 npm install 的时候,明确指出我要安装这个版本。

  • 以 ^ 开头的
"xxxxx": "^1.0.0"

在 npm install 的时候,我要安装最小版本是 1.0.0的,可以安装 1.0.1等更高的版本

  • 以 ~ 开头的
"xxxxx": "~1.1.1"

在 npm install 的时候,要安装大于  1.1.1 但是小于 1.2.0的所有版本,如1.1.2、1.1.3等。但不能大于 1.2.0

  • latest
"xxxxx": "latest"

在 npm install 的时候,永远保证最新的。

  • >=
"xxxxx": ">=1.1.0"

在 npm install 的时候,必须大于或者等于 1.1.0版本


总结

关于 package.json 还有很多有意思的用法,基于篇幅,我们先介绍这么多,如果以后有机会我们再介绍其它的用法

相关文章
|
5月前
|
JSON 数据格式
一篇文章讲明白Json串压缩转义
一篇文章讲明白Json串压缩转义
67 3
|
5月前
|
JSON JavaScript 前端开发
一篇文章讲明白json文件格式详解
一篇文章讲明白json文件格式详解
87 0
|
5月前
|
XML JSON 开发框架
一篇文章讲明白JSON格式转换成XML格式
一篇文章讲明白JSON格式转换成XML格式
28 0
|
5月前
|
XML JSON JavaScript
杨老师课堂之零基础学习JSON知识点
杨老师课堂之零基础学习JSON知识点
24 0
|
存储 JSON 前端开发
你的JSON & AJAX 满分学习文章,请收下
JSON(JavaScript Object Notation, JS 对象简谱)是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的 JS 规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
153 0
你的JSON & AJAX 满分学习文章,请收下
|
JSON JavaScript 前端开发
JSON知识点
JSON知识点
123 0
|
JSON vr&ar 图形学
【100个 Unity小知识点】 | Unity读取txt或者Json文件,包括 换行符 的方法
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。 也可以简单把 Unity 理解为一个游戏引擎,可以用来专业制作游戏!
【100个 Unity小知识点】 | Unity读取txt或者Json文件,包括 换行符 的方法
|
XML JSON fastjson
杨老师课堂之零基础学习JSON知识点
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/81949523 JSON j...
1097 0
|
JSON 前端开发 JavaScript
MVC项目开发中那些用到的知识点(Jquery ajax提交Json后台处理)
前言   jQuery提供的ajax方法能很方便的实现客户端与服务器的异步交互,在asp.net mvc 框架使用jQuery能很方便地异步获取提交数据,给用户提供更好的体验!  调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化;   如果提交...
1090 0
|
JSON JavaScript Java
1、JSON 相关基础知识点总结(1)
JSON定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成。它基于ECMA262语言规范(1999-12第三版)中JavaScript 编程语言的一个子集。
1124 0