网站建设 网站开发 区别网站建设合理性

包管理工具

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文件夹中
• 常用命令
  • 卸载：npm uninstall
  • 强制重新build：npm rebuild
  • 清楚缓存：npm clear cash