包管理工具
npm 包管理工具
介绍
- Node Package Manager：也就是Node包管理工具
- 但是目前已经不仅仅是Node包管理器，在前端项目中我们也使用它来管理依赖的包
- 比如 vue、vue-router、vuex、express、koa
下载和安装
- npm属于Node的管理工具，安装Node的过程中会自动安装npm工具
package配置文件
- 必填属性
{
// 项目的名称
"name":"",
// 当前项目的版本号
"version":"",
// 描述信息
"description":"",
// 作者相关信息
"author":"",
// 开源协议
"license":""
}
- private属性：
- private 是记录当前的项目是否是私有的
- 当值为true时，npm是不能发布它的，这是防止私有项目或者模块化发布出去的方式
- main 属性：
- 设置程序的入口
- 比如我们使用 axios模块，const axios = require(“axios”)
- 如果有main属性，实际上是找到对应的main属性查找文件的
- scripts属性
- 用于配置一些脚本命令
- 配置后我们可以通过 npm run 命令的key来执行这个命令
- 对于常用的start、test、stop、restart可以省略run直接通过npm start 等方式运行
- dependencies属性
- dependencies 属性是指定无论开发环境还是生成环境都需要依赖的包
- 通常是我们项目实际开发用到的一些库模块vue、vuex、vue-router、react、react-dom等等
- devDependencies
- 一些包在生产环境是不需要的，比如webpack、babel等
- npm install webpack --save-dev，将他安装到devDependencies属性中
- peerDependencies属性
- 还有一种项目依赖关系是对等依赖，也就是你依赖的一个包，它必须是另外一个宿主包为前提得
- 比如 element-plus 是依赖vue3 的
- 依赖管理
- 安装的依赖版本出现：^2.0.3或者~2.0.3
- npm的包通常需要遵从semver版本规范
- semver：https://semver.org/lang/zh-CN/
- npm semver：https://docs.npmjs.com/misc/semver
- semver 版本规范 X.Y.Z
- X主版本号（major）：当你做了不兼容的API修改（可能不兼容之前的版本）
- Y次版本号（minor）：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）
- Z修订号（patch）：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的bug）
- ^ 和 ~ 的区别
- x.y.z：表示一个明确的版本号
- ^x.y.z：表示x保持不变，y和z永远安装最新的版本
- ~x.y.z：表示x和y保持不变，z永远安装最新的版本
- engines 属性
- engines 属性用于指定Node和NPM的版本号
- 在安装过程中，会先检查对应的引擎版本，如果不符合就会报错
- 事实上也可以指定所在的操作系统 "os”:[“darwin”,“linux”]，只是很少用到
- browserlist属性
- 用于配置打包后的JavaScript浏览器的兼容情况
- 否则我们需要手动添加polyfills来支持某些语法
- 它是为webpack等打包工具付服务的一个属性
- 补充
- 全局安装依赖，会在电脑环境变量中自动添加
npm install webpack -g
会安装到指定目录下
查看安装目录
npm root -g
- 全局安装是直接将某个包安装到全局
- 比如全局安装yarn
npm install 原理
- npm install 会检测是有package-lock.json文件
- 没有lock文件
- 分析依赖关系，可能包会依赖其他的包，并且多个包之间会产生相同的依赖情况；
- 从registry仓库中下载压缩包（如果我们设置了镜像，那么会从镜像服务器下载压缩包）；
- 获取到压缩包后会对压缩包进行缓存（从npm5开始有的）；
- 将压缩包解压到项目的node_modules文件夹中
- 有lock文件
- 检测lock包的版本是否和package.json中一致（会按照semver版本规则检测）；
- 不一致：会重新构建依赖关系，直接走顶层的流程
- 一致：会优先查找缓存，如果没有找缓存会从registry仓库下载，如果找到会取缓存中的压缩文件，并且压缩文件解压到node_modules文件夹中
- 没有lock文件
- 常用命令
- 卸载：npm uninstall
- 强制重新build：npm rebuild
- 清楚缓存：npm clear cash