讯享网

 <p><h5>前言</h5></p><p id="2VEAQ4P9">虽然我是做后端的，但也时常关注前端，只是最近觉得前端的各种工具名称太眼花缭乱了，nvm、yarn、pnpm、taro……</p><p id="2VEAQ4PA">不要说具体使用，就连他们到底是工具还是新框架我都搞混。所以，我就用一篇文章简要记录他们到底是什么，怎么区别以及简易的搭建过程。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0825%2F7ccef8a9j00sirozh00b5d000v900ejp.jpg&thumbnail=660x&quality=80&type=jpg"/><br/><br/></p><p><h5>nvm</h5></p><p id="2VEAQ4PC">nvm（Node Version Manager），顾名思义，他是 Node.js 的版本管理工具。主要用来在单个操作系统下安装或管理多版本 Node，常用于解决项目中不同版本依赖问题。</p><p id="2VEAQ4PD"><strong>下载</strong></p><p id="2VEAQ4PE">github 搜作者 coreybutler，项目 nvm-windows。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0825%2F0431f462j00sirokl0085d000sm00g4p.jpg&thumbnail=660x&quality=80&type=jpg"/><br/><br/></p><p id="2VEAQ4PG"><strong>安装</strong></p><p id="2VEAQ4PH">安装前如果电脑已经有了 Node.js，最好卸载以防后面冲突。然后点击 exe 文件下一步下一步完成后，nvm 会自动在电脑的用户变量中添加 NVM_HOME 和 NVM_SYMLINK，最后 cmd 输入 nvm -v，显示 nvm 版本号表示已经成功。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0825%2F4b17d337j00siroj00046d000gi008im.jpg&thumbnail=660x&quality=80&type=jpg"/><br/><br/></p><p id="2VEAQ4PJ"><strong>使用</strong></p><p id="2VEAQ4PK">nvm install 6.2.0 安装指定版本</p><p id="2VEAQ4PL">nvm uninstall 6.2.0 卸载指定版本</p><p id="2VEAQ4PM">nvm list 查看安装列表</p><p id="2VEAQ4PN">nvm use 6.2.0 使用指定版本</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0825%2Fa3c43a52j00siroj0000td000cl005wm.jpg&thumbnail=660x&quality=80&type=jpg"/><br/><br/></p><p><h5>pnpm</h5></p><p id="2VEAQ4PP">pnpm（Performant npm），是一个快速、磁盘空间友好的包管理工具，和 npm 类似，可以简单理解为 npm 的优化加强版，适合于较大的前端项目，具体的特征可以看其他博主的介绍。因为 npm 是 Node 自带，所以有 Node 即可有 pnpm。</p><p id="2VEAQ4PQ"><strong>下载安装</strong></p><p id="2VEAQ4PR">npm install pnpm -g</p><p id="2VEAQ4PS"><strong>使用</strong></p><p id="2VEAQ4PT">pnpm install 包 //</p><p id="2VEAQ4PU">pnpm i 包</p><p id="2VEAQ4PV">pnpm add 包 // -S 默认写入dependencies</p><p id="2VEAQ4Q0">pnpm add -D // -D devDependencies</p><p id="2VEAQ4Q1">pnpm add -g // 全局安装</p><p><h5>yarn</h5></p><p id="2VEAQ4Q3">yarn 是 Facebook 开发的一个 JavaScript 包管理工具，yarn 使用与 npm 不同的锁定文件格式，但是仍然可以兼容 npm 的包管理规范。</p><p id="2VEAQ4Q4"><strong>下载安装</strong></p><p id="2VEAQ4Q5">npm install -g yarn</p><p id="2VEAQ4Q6"><strong>使用</strong></p><p id="2VEAQ4Q7">yarn --version // 查看版本</p><p id="2VEAQ4Q8">yarn init // 同npm init，执行输入信息后，会生成package.json文件</p><p id="2VEAQ4Q9">yarn install // 安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock</p><p id="2VEAQ4QA">yarn run // 用来执行在 package.json 中 scripts 属性下定义的脚本</p><p><h5>写在后面</h5></p><p id="2VEAQ4QC">写这篇文章的最主要原因，其实还是因为平时独立开发中的项目有用到。比如，我放在独立博客里的在线工具（各种集成编程小工具），和项目中心（带摸鱼小游戏）都有使用 pnpm 和 yarn，大家感兴趣的话可以看看。</p>