前端开发的基础生产力素养（后期不定期更新）

概要

本文主要涉及：

nodejs版本管理工具nvm在win、*nix系统上的安装、更新、使用
npm、yarn、pnpm包管理工具的使用，换源及还原源
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的文件，将这个文件打开，在这个文件之后追加一下内容，保存后关闭。(后续如果需要更换源可以更换后面的源的路径，重置默认源直接把这一部分删除保存即可)

registry: https://registry.npmmirror.com/

重启终端，然后运行

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.npmmirror.com/
# 重置
pnpm config set registry https://registry.npmjs.com/

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

ni和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
# run
nr 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即可

windows上ni命令与系统New-Item命令冲突？

有的同学在windows上安装完ni使用ni安装依赖的时候发现终端出现了这些内容

位于命令管道位置 1 的 cmdlet New-Item
请为以下参数提供值:
Path[0]:

这个是因为在powershell上有一个New-Item的命令的别名ni与我们需要的这个ni命令冲突了，系统级别的别名优先级比较高，导致这个结果，怎么解决呢？其实官方的issue已经有人给出了解决方案，就是把系统的这个别名删除，但是值得注意的是，有些同学的电脑可能powershell的版本还是6之前的，没有Remove-Alias这个命令。

如果你打开一个新的终端，也会提示你尝试新的跨平台 PowerShell https://aka.ms/pscore6的话就证明你本地的Power Shell版本还是5,系统ni别名命令无法删除

Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。

尝试新的跨平台 PowerShell https://aka.ms/pscore6

所以需要我们将本地的powershell版本升级。

如何升级powershell？

如果你有使用过微软应用商店，就打开MicroSoft Store，搜索powershell，找到后直接安装（记得把代理软件推出，不然会有网络问题），或者通过参考微软的文档来安装。如果你本地安装的同样有Windows Terminal安装后打开Terminal，新建标签页右边的下拉菜单中会自动多一个PowerShell的选项，然后把这个终端设为默认终端（这部分可通过编辑Terminal的settings.json来实现，这部分网上也有比较多的教程，大家可以自行搜索教程）。然后为新版本的PowerShell新建一个配置文件，打开新装的powershell，输入以下内容回车：

if (!(Test-Path -Path $PROFILE)) {
  New-Item -ItemType File -Path $PROFILE -Force
}

这时候再输入notepad $PROFILE，会用记事本打开新终端的配置文件，输入Remove-Alias -Name ni -Force然后保存、重启终端之后就能愉快的使用ni命令了！

总结

web前端各个方面发展的快，大家是有目共睹的，各种各种新鲜玩意层出不穷，各种新库的出现就像一个个劲敌，希望这篇文章能够帮助各位front-end-developer练就一件自己趁手的兵器，能在打怪升级的道路上祝各位一臂之力，有用请点赞，喜欢请关注，我是Senar（公众号同名），谢谢各位！