概要

本文次要波及：

  1. nodejs版本管理工具nvm在win、*nix零碎上的装置、更新、应用
  2. npm、yarn、pnpm包管理工具的应用，换源及还原源
  3. package.lock.json、yarn.lock、pnpm-lock.yaml文件的解说及如何应用ni优雅的跨不同的包管理工具我的项目进行依赖包解决

前提&原由

我自己是一位工作将近5年的前端工程师，在当年刚步入前端开发的时候，感觉有好多货色要学，很多技术想要尝试，然而有时候因为nodejs版本的不同、依赖包下不下来、跟网上学的换源换的有问题了也不会还原，各种各样的奇葩问题，差点把我劝退。所以就将前端开发中的nodejs环境筹备、包管理器、依赖装置、开发这一套流程总结进去的一个最佳实际记录下来，给老手、高手、新手们一个参考，省得每次碰到这些个磨人的问题都要去翻以前的笔记、珍藏，求助于搜索引擎，总之这就是一篇记录前端开发环境的疑难杂症帖，不波及任何技术解说，间接给你最佳实际和问题的解决方案，如果你的本地环境曾经烂的不行了，举荐全副卸载删掉，依照本文重新处理本地环境，本文前期会追随风行的技术栈不定期更新内容举荐珍藏，如果好的工具、内容或最佳实际欢送在评论区交换！

nodejs版本管理工具nvm篇

nvm是什么？我为什么须要nvm？

当咱们在应用一些新的库或者新版本的一些库的时候通常会碰到一个最低nodejs版本的要求，这时候如果咱们本地的nodejs版本太老的，用不了怎么办（我想问那些说卸载了从新装个新版本的同学，下次还要这么干吗？如果你有好几个我的项目要保护，有的历史性的我的项目用不了比拟新版本的nodejs怎么办，你这个行不通！），所以咱们就须要一个能够治理本地nodejs版本的工具来解决这个问题

nvm装置、应用、更新

nvm能够在win、linux、osx下面装置，因为linux和osx下面装置过程根本差不多，我这里就拿win和linux举例子，如果你本地有nodejs，并且全局装置的有包，请先应用npm list -g --depth 0查看全局装置的包，应用node -v查看你的nodejs版本，并记录下来，不便之后装置好nvm之后从新还原本地环境，而后参考如何彻底卸载win上的nodejs，将本地的nodejs删除，之后进行下一步。

win上装置nvm（如果曾经装置间接跳过看win上更新的）

筹备工作:右键你的开始菜单，点击Windows PowerShell(管理员)(A)，输出Set-ExecutionPolicy RemoteSigned，回车之后输出A，这是因为windows下运行*.ps1脚本（powershell的脚本）的时候，须要设置执行权限。

nvm在win上的装置过程比较简单且仓库与原nvm不是同一个仓库，是这个nvm-windows，首先咱们到这个仓库的releases页面，找到nvm-setup.zip，点击下载一个安装文件的压缩包，下载实现之后就关上装置，始终下一步就完事了，如果你想要扭转装置门路，也能够自行更换，然而肯定要留神装置门路不能有中文和空格，不然你就从新卸载再装置吧。全副搞定之后，重启下终端或者电脑（重启终端不行，就重启电脑，这一步次要是须要使配置的环境变量PATH失效），在重启完之后，关上终端，在终端输出nvm version，如果有失常输入，就阐明曾经装置好了，这个时候咱们须要换源（为了更快的网络速度，进步装置nodejs和我的项目依赖包的速度），首先关上你装置的nvm的目录，外面应该有一个settings.txt的文件，将这个文件关上，在这个文件之后追加一下内容，保留后敞开。(后续如果须要更换源能够更换前面的源的门路，重置默认源间接把这一部分删除保留即可)

node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/registry: https://registry.npm.taobao.org

重启终端，而后运行

nvm install xxxxxx(你之前装置的nodejs版本，比方16.13.2)

如果须要其余版本的也能够依照这个来装置指定版本的nodejs，期待装置结束之后，关上Windows PowerShell(管理员)(A)，nvm ls查看装置了哪些版本的nodejs，应用nvm use xxxxxx指定默认应用哪个版本的nodejs，当你没有用管理员终端运行的时候，不出意外会报exit status 1: ����������这个错，用管理员终端来切换就能够了(只有在用nvm切换nodejs版本的时候才会有这个问题，平时开发不会用到)。这个时候你能够通过npm install -g xxx去装置之前你全局装置的包就能够了。

到这里win下的nvm的装置的坑应该是踩完了，接下来通知你更新的。

win上更新nvm

如果你的nvm version低于v1.1.8可能就不能通过应用v16.13+的nodejs内置的corepack来应用pnpm了，不理解corepack和pnpm的同学能够去看我的另一篇文章，为了取得更好的开发体验和后续的降级，举荐在nvm版本更新后一段时间后降级下nvm。

同样的如果你看到nvm-windows最新的releases比你的本地版本高的话，就在releases页面找到最新版本的nvm-update.zip而后下载后解压，右键应用管理员运行，抉择最新的版本期待装置实现之后，重启终端应用nvm version查看，是否装置胜利，如果不是就从新运行一遍降级的文件。

linux上装置nvm（一样的如果装置了nodejs，请先卸载）

依据官网的readme文档，运行

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash# 或者wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

通常状况下，一部分同学会因为DNS净化的问题报curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused的错，这个时候往上一些帖子就会让你去那种查域名ip的网站通过改本地host的形式来修复这个问题，这里通知你一个更加优雅的解决的计划：

在nvm仓库的readme中找到Install & Update Script的局部，点击install script跳转到install.sh这个文件，把这个文件的内容全副复制，在本地新建个install-nvm.sh的脚本文件，将内容全副粘贴进去保留，之后在本地bash ./install-nvm.sh运行这个脚本就能够了，之后如果须要更新降级nvm了，只须要将脚本文件中的版本号改为最新的版本号即可，比方截至文章更新时，最新的nvm版本为0.39.1。同样的运行完之后须要依照readme文档中的将上面的内容增加到你终端的配置文件中，比方你用默认的bash你就要查看下你的~/.bashrc中有没有一下的内容，如果没有须要增加，如果你用zsh，你就须要把上面的这段配置增加到你的~/.zshrc中，而后source下你的配置文件，使之失效
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

到这里，在unix零碎上装置和更新nvm的局部就实现了。

然而要留神在win和unix上设置默认nodejs的版本的命令是不一样的。在win上用nvm use 16.13.2即可切换以后零碎的nodejs版本并将其设置为默认版本，，unix下面须要应用nvm alias default 16.13.2，设置默认的nodejs版本，应用nvm use 16.13.2设置以后环境中的nodejs版本。运行一下上面这个来换源（后续如果须要更换源能够更换前面的源的门路从新执行，重置默认源间接把前面的门路换为https://npmmirror.com/mirrors/node执行即可）

export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

npm、yarn、pnpm依赖包管理工具

npm是长期以来nodejs默认的包管理工具，当你装置nodejs之后就默认全局曾经装置了npm，然而因为历史设计问题，应用npm装置依赖会导致我的项目中的依赖包体积特地大，网络不好的状况下装置过程会特地长，所以前面有了yarn，然而yarn也没有很好的解决依赖体积大的问题，前面就呈现了pnpm，对于这几个包管理工具的比照及原理并不是本文要探讨的，这里举荐新我的项目应用pnpm装置依赖，对于如何应用pnpm，也能够参考我之前的一篇文章，如果在本地带宽不差的状况下，依赖装置特地慢或者装置不上，并且报错的都是超时的话，可能就须要换源了，pnpm换源及重置源：

# 更换淘宝源pnpm config set registry https://registry.npm.taobao.org# 重置pnpm config set registry https://registry.npmjs.org

npm换源及还原都是一样的命令

lock文件

应用不同的包管理工具装置依赖后会生成不同名称的lock文件，比方npm装置依赖后会生成package.lock.json，yarn会生成yarn.lock，pnpm会生成pnpm-lock.yaml，这些文件是为了保障多人合作开发保护我的项目的时候，大家装置的包都是同一个版本的。

什么是ni？我为什么须要ni？

可能因为一些历史起因或其余起因，咱们平时开发的时候保护的我的项目可能应用的包管理工具不都是对立的，造成咱们须要依据不同的我的项目应用不同的命令来装置依赖、启动我的项目、打包，这样比拟繁琐也比拟容易出错，所以举荐应用ni来优化这个状况，ni能够依据不同的lock文件应用不同的命令装置依赖和执行其余的一些操作，并且能够配置你的默认包管理工具，在起一个新我的项目的时候能够间接无脑操作。

ni装置&应用

# 装置npm i -g @antfu/ni# 应用# 装置依赖ni # npm i; yarn i; pnpm i# 装置特定的包ni libname # npm i libname; yarn add libname; pnpm i libname# runnr xxscript # npm run xxscript; yarn xxscript; pnpm xxscript# 执行nx prisma generate # npx prisma generate; yarn dlx prisma generate; pnpm dlx prisma generate# 更新依赖nu # npm update; yarn update; pnpm update# 命令后跟\?查看对应的包管理器源命令(不执行，只打印命令)ni \? npm i; yarn i; pnpm i

这样开发人员在开发过程中就无需关注以后我的项目应用的是什么包管理工具了，间接无脑ni nr nx即可

总结

web前端各个方面倒退的快，大家是引人注目的，各种各种陈腐玩意层出不穷，各种新库的呈现就像一个个劲敌，心愿这篇文章可能帮忙各位front-end-developer练就一件本人趁手的兵器，能在打怪降级的路线上祝各位一臂之力，有用请点赞，喜爱请关注，我是Senar（公众号同名），谢谢各位！