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
相关推荐
我是苏苏20 分钟前
Web开发:C#通过ProcessStartInfo动态调用执行Python脚本
java·服务器·前端
无羡仙40 分钟前
Vue插槽
前端·vue.js
Cosimac1 小时前
用 npm 做免费图床,这操作绝了!
npm·github
用户6387994773051 小时前
每组件(Per-Component)与集中式(Centralized)i18n
前端·javascript
SsunmdayKT1 小时前
React + Ts eslint配置
前端
奶糖的次元空间2 小时前
带你用 Javascript 生成器玩转「会暂停」的函数
node.js
开始学java2 小时前
useEffect 空依赖 + 定时器 = 闭包陷阱?count 永远停在 1 的坑我踩透了
前端
zerosrat2 小时前
从零实现 React Native(2): 跨平台支持
前端·react native
狗哥哥2 小时前
🔥 Vue 3 项目深度优化之旅:从 787KB 到极致性能
前端·vue.js
青莲8432 小时前
RecyclerView 完全指南
android·前端·面试