当前位置：首页 > news >正文

前端包管理工具：npm，yarn、cnpm、npx、pnpm

news 2025/9/12 6:32:38

包管理工具npm

Node Package Manager，也就是Node包管理器；

但是目前已经不仅仅是Node包管理器了，在前端项目中我们也在使用它来管理依赖的包；

比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等；

如何下载和安装npm工具呢？

npm属于node的一个管理工具，所以我们需要先安装Node；

node管理工具：https://nodejs.org/en/，安装Node的过程会自动安装npm工具；

npm管理的包可以在哪里查看、搜索呢？

https://www.npmjs.org/

这是我们安装相关的npm包的官网

npm管理的包存放在哪里呢？

我们发布自己的包其实是发布到registry上面的；

当我们安装一个包时其实是从registry上面下载的包；

npm的配置文件

通过 npm init –y，就可以初始化一个配置文件

通过脚手架创建项目，脚手架会帮助我们生成package.json，并且里面有相关的配置

name是项目的名称；

version是当前项目的版本号；

main设置入口文件；

description是描述信息，很多时候是作为项目的基本描述；

author是作者相关信息（发布时用到）；

license是开源协议（发布时用到）；

npm install 命令

全局安装（global install）： npm install webpack -g;

项目（局部）安装（local install）： npm install webpack

只在开发环境使用到的包：npm install XXX -D

默认是-S，就是开发环境和生产环境都需要的包

清除缓存：npm cache clean

yarn工具

另一个node包管理工具yarn；

yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具；

yarn 是为了弥补早期npm 的一些缺陷而出现的；

早期的npm存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题；

虽然从npm5版本开始，进行了很多的升级和改进，但是依然很多人喜欢使用yarn；

cnpm工具

由于一些特殊的原因，某些情况下我们没办法很好的从 https://registry.npmjs.org下载下来一些需要的包。我们可以设置npm的下载源，换成淘宝镜像。如果你并不希望将npm镜像修改，就可以使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm config get registry # https://r.npm.taobao.org/

npx工具

npx是npm5.2之后自带的一个命令。

npx的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的指令。

相比 npm，npx 会自动安装依赖包并执行某个命令。

假如我们要用 create-react-app 脚手架创建一个 react 项目，常规做法如下：

// 第一步
npm i -g create-react-app// 第二步
create-react-app my-react-app

有了 npx 后，我们可以省略安装 create-react-app 这一步。

// 使用npx
npx create-react-app my-react-app

什么是pnpm呢？

由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。被誉为“最先进的包管理工具”

速度快、节约磁盘空间、支持monorepo、安全性高

当使用 npm 或 Yarn 时，如果你有 100 个项目，并且所有项目都有一个相同的依赖包，那么，你在硬盘上就需要保存 100 份该相同依赖包的副本。

如果是使用 pnpm，依赖包将被存放在一个统一的位置

        如果你对同一依赖包使用相同的版本，那么磁盘上只有这个依赖包的一份文件；

        如果你对同一依赖包需要使用不同的版本，则仅有版本之间不同的文件会被存储起来

        所有文件都保存在硬盘上的统一的位置、