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
相关推荐
ShineWinsu3 小时前
对于CSS:弹性布局(Flexbox)的解析
前端·css·面试·浏览器·web·网页·弹性布局
山雀~3 小时前
第5次百日救赎计划
前端
xiaogai_gai3 小时前
销售出库单同步实战:旺店通→金蝶云星空的单一策略深度拆解
大数据·前端·数据库
const_qiu3 小时前
第二章 2.6:初始化 NestJS 服务端 —— TypeScript 后端框架体验
前端·javascript·typescript
console.log('npc')4 小时前
[特殊字符] AI Agent 工作台前端实战教程 · 新手入门指南
前端·人工智能
gCode Teacher 格码致知4 小时前
前端教学2:ul标签的应用场合与经典案例
前端
const_qiu4 小时前
第 2.5 章 2.5.6:前端登录、Token 无感续签与路由守卫
java·前端·人工智能·状态模式
用户83134859306984 小时前
Vue3 事件:常用用法与开发高频坑点
前端·javascript·vue.js
weixin_446260854 小时前
ReAct‑Evolve:基于轨迹反馈的ReAct智能体自主提示演化系统
前端·react.js·前端框架