对于前端项目如vue、react大多由nodejs环境来构建编译，事实上，nodejs做的事就是将vue、react代码翻译成html,css,js，浏览器最终也只能运行html,css,js，随着nodejs版本的演进，包管理可谓是一团乱麻。作为一名资深工程师，有时候避免不了跑跑前端开源项目，但是一直非常困惑，这个项目用npm,另一个项目用yarm，别的又用了其他，这尼玛变来变去，花样太多了，我觉得本质上就是一开始包管理器没有设计好，java有maven、gradle ，python 有 pip，go 有mod，rust 有cargo,从没听说包管理器名字都换了- -！
面对这乱局，偶尔会接触前端项目的我，也只能水一篇文章了，也方便后期查阅，因为实在记不住~
npm: nodejs官方包管理器,默认从官网下载https://www.npmjs.org/
npx: nodejs 执行器，本质就是npm run,执行方便而已
cnpm: 本质和npm一样，只是包会从国内仓库下载
yarn:相对于npm有性能优化，包管理扁平化，而不是嵌套依赖。
pnpm:更进一步的磁盘占用优化，通过软硬连接管理，同时会有差分管理，下载更新速度快，节省磁盘空间。
| 特征/工具 | npm | Yarn | cnpm | pnpm | npx |
|---|---|---|---|---|---|
| 时间 | 2010 | 2016 | 未知 | 2016 | 2017 |
| 特点 | Node.js的官方包管理器，广泛使用。支持大量包和版本，易于入门。 | 由Facebook开发，注重速度和包的稳定安全。使用锁文件确保依赖一致性。 | 针对中国开发者的npm镜像，提高在中国大陆地区的访问速度和安装效率。 | 侧重于性能和空间节省，通过硬链接和符号链接来重用包，减少冗余。 | npm的包运行器，允许直接执行npm仓库中的包而不需要全局安装。 |
| 性能对比 | 标准基准，较慢 | 相对更快，通过并行下载和更好的缓存管理优化性能 | 依赖于npm，性能提升主要来源于镜像的使用 | 在多项目中重用包，节省空间和安装时间，性能优异 | 适用于执行单次任务，避免全局安装，性能取决于npm |
| 使用说明/工具 | npm | Yarn | cnpm | pnpm | npx |
|---|---|---|---|---|---|
| 安装包 | npm install package_name |
yarn add package_name |
cnpm install package_name |
pnpm add package_name |
- |
| 安装特定版本包 | npm install package_name@version |
yarn add package_name@version |
cnpm install package_name@version |
pnpm add package_name@version |
- |
| 全局安装包 | npm install -g package_name |
yarn global add package_name |
cnpm install -g package_name |
pnpm add -g package_name |
- |
| 更新包 | npm update package_name |
yarn upgrade package_name |
cnpm update package_name |
pnpm update package_name |
- |
| 卸载包 | npm uninstall package_name |
yarn remove package_name |
cnpm uninstall package_name |
pnpm remove package_name |
- |
| 列出已安装包 | npm list |
yarn list |
cnpm list |
pnpm list |
- |
| 运行脚本 | npm run script_name |
yarn run script_name |
cnpm run script_name |
pnpm run script_name |
npx script_name (执行项目中或远程的npm包命令) |
| 创建项目 | npm init 或 npm init project_name |
yarn init 或 yarn create project_name |
cnpm init 或 cnpm init project_name |
pnpm init 或 pnpm create project_name |
- |
| 查看包信息 | npm view package_name |
yarn info package_name |
cnpm view package_name |
pnpm info package_name |
- |
官方文档：
npm: https://docs.npmjs.com/
Yarn: ttps://classic.yarnpkg.com/en/docs
cnpm: 和npm一致
pnpm: https://pnpm.io/
npx: npm文档中包含npx使用说明
大哥,这个页面要优化一下吧,我用vivaldi打开风扇直接转了起来,系统的任务管理器提示CPU占用6%以上,浏览器的任务管理提示占用20%以上