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
相关推荐
z-robot几秒前
Nginx 配置代理
前端
用户47949283569158 分钟前
Safari 中文输入法的诡异 Bug:为什么输入 @ 会变成 @@? ## 开头 做 @ 提及功能的时候,测试同学用 Safari 测出了个奇怪的问题
前端·javascript·浏览器
没有故事、有酒20 分钟前
Ajax介绍
前端·ajax·okhttp
朝新_23 分钟前
【SpringMVC】详解用户登录前后端交互流程:AJAX 异步通信与 Session 机制实战
前端·笔记·spring·ajax·交互·javaee
裴嘉靖26 分钟前
Vue 生成 PDF 完整教程
前端·vue.js·pdf
毕设小屋vx ylw28242628 分钟前
Java开发、Java Web应用、前端技术及Vue项目
java·前端·vue.js
冴羽1 小时前
今日苹果 App Store 前端源码泄露,赶紧 fork 一份看看
前端·javascript·typescript
蒜香拿铁1 小时前
Angular【router路由】
前端·javascript·angular.js
brzhang2 小时前
读懂 MiniMax Agent 的设计逻辑,然后我复刻了一个MiniMax Agent
前端·后端·架构
西洼工作室2 小时前
高效管理搜索历史:Vue持久化实践
前端·javascript·vue.js