npm

Node Package Manager，Node包管理器；

npm 配置文件

1.配置文件会记录着你项目的名称、版本号、项目描述等

2.包含项目所依赖的其他库的信息和依赖库的版本号

3.常见属性

name是项目的名称；
version是当前项目的版本号；
description是项目的基本描述；
author是作者相关信息；
license是开源协议；
private属性记录当前的项目是否是私有的；
当值为true时，npm是不能发布它的；
main:程序的入口；

script 属性

用于配置脚本例如vue项目启动脚本

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "analyz": "npm_config_report=true npm run build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },

dependencies属性

无论开发环境还是生成环境都需要依赖的包

  "dependencies": {
    "vue": "^2.6.10",
    "vue-axios": "^2.1.2",
    "vue-i18n": "^8.7.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.1"
  },

devDependencies属性

一些包在生成环境是不需要的，比如webpack; npm install xx -D

  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.5",
    "@vue/cli-service": "^3.1.4",
    "chai": "^4.1.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17",
    "webpack-bundle-analyzer": "^3.0.3"
  },

peerDependencies属性

项目依赖关系是对等依赖; 例如element plus 只能在vue3中使用；

版本号详解

X主版本号（major）

Y次版本号（minor）

Z修订号（patch）

x.y.z：表示一个明确的版本号；

~x.y.z：表示x和y保持不变的，z永远安装最新的版本；

^x.y.z：表示x是保持不变的，y和z永远安装最新的版本；

npm install

npm install xxx -g 全局安装全局一般用来安装工具包 yarn webpack
npm install xxx 局部安装

注意：并不是全局安装了就所有项目都能用例如axios

1.生产依赖

npm install xxx

2.开发依赖

npm install xxx -D

原理：先寻找package-lock.json文件

graph TD
检查是否有package-lock.json --> 无lock就创建一个lock --> 检测依赖的一致性 --> 查找缓存 --> 无缓存就去registry仓库下载--> 压缩--> 压缩到node_modules

有lock

 分析依赖关系，这是因为我们可能包会依赖其他的包，并且多个包之间会产生相同依赖的情况；
 从registry仓库中下载压缩包（如果我们设置了镜像，那么会从镜像服务器下载压缩包）；
 获取到压缩包后会对压缩包进行缓存（从npm5开始有的）；
 将压缩包解压到项目的node_modules文件夹中（前面我们讲过，require的查找顺序会在该包下面查找）

无lock

检测lock中包的版本是否和package.json中一致（会按照semver版本规范检测）；
不一致，那么会重新构建依赖关系，直接会走顶层的流程； 
一致的情况下，会去优先查找缓存;
没有找到，会从registry仓库下载，直接走顶层流程；
查找到，会获取缓存中的压缩文件，并且将压缩文件解压到node_modules文件夹中；

package-lock.json常见的属性解释

    "@babel/generator": {
      "version": "7.17.3",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
      "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
      "dev": true,
      "requires": {
        "@babel/types": "^7.17.0",
        "jsesc": "^2.5.1",
        "source-map": "^0.5.0"
      }
    },
    
    //lockfileVersion：lock文件的版本；
    //requires：使用requires来跟踪模块的依赖关系；
    //resolved用来记录下载的地址，registry仓库中的位置；
    //integrity用来从缓存中获取索引，再通过索引去获取压缩包文件；
    //requires/dependencies记录当前模块的依赖；

其他的npm 命令

npm uninstall package -D 卸载某个包
npm rebuild 强制重新build
npm cache clean 清除缓存
npm ci 按照package-lock.json 中的版本号按照依赖

其他包管理工具

yarn

作用：弥补了npm早期的一些缺陷，例如安装慢。管理混乱等；

Yarn 常用命令详解 - 腾讯云开发者社区-腾讯云 (tencent.com)

npm 执行命令查找顺序（npm run dev）

先查询当前项目的node_modules文件夹下
查询全局中是否有；npm -g 中是否有
再查询本地的环境变量；

前端包管理工具

npm