(三)包管理工具:npm、cnpm、yarn、pnpm

69 阅读1分钟

npm是前端主要包管理工具,yarn和cnpm是其衍生工具(yarn解决早期npm性能问题,cnpm针对国内网络优化)

一、npm包管理工具

image.png

1.package.json常见配置

1757132528364.png

2. 配置文件常见属性

1757208403599.png

1757209437662.png 1757209771544.png

3.依赖的版本管理

1757236855687.png

4.npm install命令

1757237684680.png

1757237863701.png

5.package-lock.json

1757238690546.png

6.npm install原理

1757239054096.png 1757239125722.png

7.npm 其他命令

1757239525053.png

二、yarn

1. yarn命令、与npm对比

1757240073203.png

三、cnpm

1757241199198.png

四、局部命令执行 npx

  • 定义: npx是npm5.2之后自带的一个命令,主要用于调用项目中某个模块的指令。
  • 常见用途: 最典型的应用场景是调用项目局部安装的模块命令,避免全局和局部版本冲突。 1757242785094.png
    • 使用方法: 直接使用npx调用命令

    • 工作原理:

      • 自动查找当前目录node_modules/.bin下的命令
      • 与直接路径调用等效但更简洁
    • 版本演进:

      • 早期npx需要显式安装
      • npm5.2+已内置该功能

五、npm发布自己的包过程

1757243223274.png 1757244645064.png

六、原来包管理工具的痛点

npm、yarn、cnpm未解决痛点
  • 共同问题:
    • 都采用每个项目独立安装依赖的模式
    • 都未解决多项目依赖重复占用空间问题
项目依赖包过多
  • 典型依赖:

    • 现代前端项目通常需要webpack、babel、vue、vue-router、vuex、pinia、axios等众多依赖
    • 每个主依赖又会带来数十个次级依赖
  • 空间占用:

    • 单个项目node_modules可能占用300MB-500MB空间
    • 依赖越多,空间占用越大
多项目占用空间大
  • 空间问题:
    • 每个项目都独立安装完整依赖
    • 导致磁盘空间被大量重复依赖占用

七、pnpm

1757245932994.png

1.硬链接、软连接

1757246309801.png

1757246963224.png

2.pnpm做了什么

1757247382564.png

3.pnpm创建非扁平的node_modules目录

1757248314207.png

4.pnpm安装、使用

1757248711018.png

5.pnpm的store

1757249206813.png