npm是前端主要包管理工具,yarn和cnpm是其衍生工具(yarn解决早期npm性能问题,cnpm针对国内网络优化)
一、npm包管理工具
1.package.json常见配置
2. 配置文件常见属性
3.依赖的版本管理
4.npm install命令
5.package-lock.json
6.npm install原理
7.npm 其他命令
二、yarn
1. yarn命令、与npm对比
三、cnpm
四、局部命令执行 npx
- 定义: npx是npm5.2之后自带的一个命令,主要用于调用项目中某个模块的指令。
- 常见用途: 最典型的应用场景是调用项目局部安装的模块命令,避免全局和局部版本冲突。
-
-
使用方法: 直接使用npx调用命令
-
工作原理:
- 自动查找当前目录node_modules/.bin下的命令
- 与直接路径调用等效但更简洁
-
版本演进:
- 早期npx需要显式安装
- npm5.2+已内置该功能
-
五、npm发布自己的包过程
六、原来包管理工具的痛点
npm、yarn、cnpm未解决痛点
- 共同问题:
- 都采用每个项目独立安装依赖的模式
- 都未解决多项目依赖重复占用空间问题
项目依赖包过多
-
典型依赖:
- 现代前端项目通常需要webpack、babel、vue、vue-router、vuex、pinia、axios等众多依赖
- 每个主依赖又会带来数十个次级依赖
-
空间占用:
- 单个项目node_modules可能占用300MB-500MB空间
- 依赖越多,空间占用越大
多项目占用空间大
- 空间问题:
- 每个项目都独立安装完整依赖
- 导致磁盘空间被大量重复依赖占用