npm包管理工具

包管理工具

npm 包管理工具

介绍

  • Node Package Manager:也就是Node包管理工具
  • 但是目前已经不仅仅是Node包管理器,在前端项目中我们也使用它来管理依赖的包
  • 比如 vue、vue-router、vuex、express、koa

下载和安装

  • npm属于Node的管理工具,安装Node的过程中会自动安装npm工具

package配置文件

  • 必填属性
json 复制代码
{
	// 项目的名称
	"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 版本规范 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等打包工具付服务的一个属性
  • 补充
    • 全局安装依赖,会在电脑环境变量中自动添加
sh 复制代码
npm install webpack -g

会安装到指定目录下

查看安装目录

sh 复制代码
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
相关推荐
凌览9 分钟前
Claude半个月崩7次!算力不够自己造,强制实名制封
前端·后端
sTone8737523 分钟前
跨端框架通信机制全解析:从 URL Schema 到 JSI 到 Platform Channel
android·前端
蜡台24 分钟前
vue params传参刷新网页数据丢失解决方法
前端·javascript·vue.js
sTone8737525 分钟前
Java 注解完全指南:从 "这是什么" 到 "自己写一个"
android·前端
文心快码BaiduComate30 分钟前
里程碑突破 | 文心快码中标国家开发银行代码研发助手项目
前端·后端·架构
霍理迪39 分钟前
axios的封装
前端
夜焱辰40 分钟前
CreatorWeave:一个本地优先的浏览器 AI 创作工作空间
前端·agent
wscqs42 分钟前
Superpowers 与 everything-claude-code 与 ui-ux-pro-max-skill 这些怎么合并起来一起用
前端
大转转FE1 小时前
转转前端周刊第192期: 财务数仓 Claude AI Coding 应用实战
前端·人工智能
weixin_471383031 小时前
React Flow + Zustand 搭建工作流编排工作台
前端·react.js·前端框架