使用volta统一了前端各项目的node版本

黄油面包
4,231 阅读4分钟

公司项目存在三个版本的node：20、16、12，平时项目开发都是通过n/nvm来回切换，比较低效。逛掘金时发现volta工具，抱着试试的态度，发现还挺好用的。

优点

  1. 方便项目级别管理node版本，只要在package.json增加volta-node版本，自动切换到对应的版本
  2. 相比于vscode插件，volta可以在命令行运行，比如terminal
  3. 公司设备都是mac，volta可以直接命令行安装（windows官网也可以用，还没测试）
  4. 切换速度比较好，体验较好（rust编写）

公司项目整合效果

各项目打上volta-node标识，node版本跟jenkins打包的版本保持统一。实现不同node版本项目同时跑起来了，再也不用来回切node版本了，跑了一段时间后很丝滑。

下面列出使用的文档以及踩的坑

volta官网

docs.volta.sh/guide/#how-…

mac安装方式

# install Volta
curl https://get.volta.sh | bash

source ~/.bash_profile

安装好，vscode还是旧的版本，需要重启vscode生效

Mac 上 Node 的安装地址：

当你使用 Volta 来安装 Node.js 时，Node.js 不是安装在 Mac 上的传统位置（例如 /usr/local/bin 或 /opt），而是安装在 Volta 的沙盒内。具体到文件系统路径，则大致如下：

  • Volta 安装目录：~/.volta（在用户的主目录下）
  • Node 版本安装目录：~/.volta/tools/image/node（这里会包含不同版本的 Node.js 实例）

常见命令及踩坑

  • pin: 不同项目node版本不同
 volta pin node@12
 volta pin yarn@1.22.2

pin后，packag.json会产生volta标识（后续volta将会软链到对应的node包）

// package.json
{
  "volta": {
    "node": "16.15.0",
    "yarn": "1.22.21"
  }
}
  • install: 全局安装node(将会覆盖n等安装的node版本)
volta install node@12

常见疑问

  1. 安装可能遇到问题

github的volta的release无法下载下来，可以给github加上代理（这个加速也适合git clone加速拉取项目）

可能问题：
curl: (22) The requested URL returned error: 404
Error: Could not download Volta version ''. See https://github.com/volta-cli/volta/releases for a list of available releases

解决：
github加上代理

将volta.sh下载到本地
curl -k https://get.volta.sh > volta.sh
修改github源
#  echo "https://mirror.ghproxy.com/https://github.com/volta-cli/volta/releases"
chmod +x volta.sh
运行
./volta.sh
  1. 卸载volta全局安装的node包

uninstall issue

当前全局安装的node包，通过uninstall 无法卸载。需要手动解决

removed the node version from `~/.volta/tools/user/platform.json`

image.png 3. 跟n，nvm全局管理工具不冲突

可以项目采用volta管理node，全局采用其他，当然直接采用volta管理全局node也可以

pnpm支持

之前如果全局安装pnpm，比如通过npm，npm i pnpm -g ，pnpm在mac的安装地址为：/usr/local/bin/pnpm，注意不是全局pnpm的node_modules缓存地址（可通过pnpm store path查看）

虽然我们配置了volta，项目中也pin了node版本，但是通过pnpm在项目中去获取node版本，发现跟yarn不一致。

pnpm还是获取的全局的node版本，而不是项目中pin的node版本。

测试例子

比如：全局node的版本是20.11.0，package.json pin后的node版本是16.15.0

# package.json
"volta": {
  "node": "16.15.0",
  "yarn": "1.22.21"
}

项目中命令行检验node版本，命令如下

# 因为pin了yarn，此时volta软链查到node版本：16.15.0
yarn node -v 
# pnpm还没有设置好，此时还是全局的node版本：20.11.0
# pnpm node -v

pnpm在volta中设置方法

pnpm配置指南[docs.volta.sh/advanced/pn…]

pnpm的支持还是实验性质的，可能会有bug，目前试下来不影响正常使用 image.png

  1. 增加全局变量VOLTA_FEATURE_PNPM=1
vim ~/.bash_profile
# 添加一行VOLTA_FEATURE_PNPM变量
# export VOLTA_FEATURE_PNPM=1
source ~/.bash_profile

image.png

  1. pin pnpm到项目中 volta pin pnpm
#  package.json
  "volta": {
    "node": "16.15.0",
    "yarn": "1.22.21",
    "pnpm": "8.15.6"
  }

  1. 重启vscode 再次测试pnpm node -v 展示 16.15.0则说明pnpm配置成功

  2. 可能的错误：

error: Only node and yarn can be pinned in a project
Use `npm install` or `yarn add` to select a version of pnpm for this project.
sh-3.2$

解决：重启vscode，再次pin pnpm

volta基本原理

安装volta后，node或者其他包管理器：npm、yarn等全局安装二进制文件被重定向到 .volta/bin 目录下，而这些脚本又软链到了volta-shim

通过which脚本能看到二进制被修改到volta ，which node ，which yarn等，没安装前都在/usr/local/bin/xxx，

image.png

查看volta bin

打开volta bin目录cd ~/.volta/bin image.png ls -l查看列表文件信息，node npm等都软链到了volta-shim image.png

volta-shim的主要作用

shim充当了一个智能路由器的角色，在运行命令时将你的请求路由到正确的node或者包管理器版本。

当你执行node -v或者npm，yarn等时，volta-shim,它会从项目的 package.json 的 volta 字段读取node以及包管理器版本（npm yarn等）版本信息。如果没有配置volta，它会使用用户全局默认的版本。

对于node来说，默认volta就会使用之前安装的node版本。当然也可以通过volta去接管全局的node，volta install node@xx的方式，用volta来接管全局的node版本。

最后

以上就是volta统一项目的过程，有任何疑问可以评论区交流

avatar
文章
阅读
粉丝