关于前端:前端开发的基础生产力素养后期不定期更新

概要

本文次要波及：

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
# 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 即可

总结

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