你需要知道的 Node 版本管理工具 fnm——一次彻底的前端工程环境升级

674 阅读4分钟

大家好,我是water,欢迎关注我的公众号:前端进阶说,希望对你有帮助。

前言

在现代前端项目中,你肯定遇到过这样的场景:A 项目需要 Node 14,B 项目要求 Node 18,还要用不同版本的 pnpm(或 yarn、npm)。不断地切换 Node 版本,担心全局包冲突,甚至同事间环境不一致导致“在我电脑能跑你那里却爆炸”。这就是为什么高效、优雅的 Node 版本管理工具会成为刚需。

今天我来分享 fnm(Fast Node Manager),以及如何用 fnm 和自动化技巧提升你多项目管理 Node 和 pnpm 的体验,并替换掉老旧的 nvm。

为什么选 fnm 而不是 nvm?

nvm 曾经主宰了 Node 版本切换工具,但它本身存在这些不足:

  • 安装/切换速度慢
  • 原生不支持 Windows
  • 多项目自动切换繁琐,不够智能

fnmFast Node Manager) 是 Rust 重写的版本管理器,特点是:

  • 极快的安装和切换速度
  • 跨平台,完美支持 macOS、Linux和Windows
  • 自动跟踪 .nvmrc.node-version,项目间无缝切换

使用 fnm 在多个项目中自动切换 Node 版本

1. 安装 fnm

推荐安装命令

# 推荐最优雅方式
curl -fsSL https://fnm.vercel.app/install | bash

配置环境变量

安装脚本会提示你将以下配置加入 shell 启动文件(如 .zshrc.bashrc):

eval "$(fnm env)"

执行 fnm envfnm env --shell=zsh 看看是否输出了关于自动切换(hook)的相关内容: 输出内容应该类似:

export PATH="/Users/yourname/.fnm:$PATH"
eval "$(fnm env --use-on-cd)"
...

如果 --use-on-cd 没有,你可以在 .zshrc 里写:

eval "$(fnm env --use-on-cd)"

提示:用 fish、PowerShell 请参考官方文档

执行一次:

source ~/.zshrc   # 或 .bashrc等

2. 项目内配置 Node 版本文件

在每个项目根目录写入 .nvmrc.node-version,内容为所需 node 版本号:

echo "18.17.0" > .nvmrc     # 举例为 node v18.17.0
# 或 echo "14.15.0" > .node-version

当然也可以直接新建文件,然后在文件里写入node的版本。

之后,每当你 cd 到对应目录,fnm 会自动切换至对应 Node 版本,无需手动 use!

在切换 Node 的同时自动同步 pnpm 版本

fnm 只管理 Node.js,不会自动切换 pnpm/yarn 等子包管理器,但我们有两种优雅的解决方案:

方案1(不推荐):用 pnpm 的 .npmrc 配合 shell hook 自动切换/安装 pnpm

  1. 在项目根目录的 .npmrcpackage.json 指定 pnpm 版本:

    # 在 .npmrc
    package-manager=pnpm@8.10.0
    

    或在 package.json

    {
      "packageManager": "pnpm@8.10.0"
    }
    
  2. 项目进入时自动切换 pnpm 版本的推荐方案 推荐在 shell 启动脚本加入如下 hook:

    # 只需加在 .zshrc/.bashrc 等结尾
    function ensure_pnpm() {
      # 如果 packageManager 字段有声明,再自动 install 对应 pnpm 版本
      PKG_MGR_VERSION=$(jq -r '.packageManager // empty' package.json 2>/dev/null)
      if [ -n "$PKG_MGR_VERSION" ]; then
        local TOOL=${PKG_MGR_VERSION%%@*}
        local VER=${PKG_MGR_VERSION##*@}
        if [ "$TOOL" = "pnpm" ]; then
          # 判断全局 pnpm 版本,不符则安装
          if ! command -v pnpm >/dev/null || [ "$(pnpm --version)" != "$VER" ]; then
            corepack enable
            corepack prepare pnpm@$VER --activate
          fi
        fi
      fi
    }
    
    # 每次 cd 后都自动检查
    autoload -U add-zsh-hook
    add-zsh-hook chpwd ensure_pnpm
    

    这样每次换到项目目录后都会自动安装/切换 pnpm 到你要求的版本。

方案2(强烈推荐):团队用 corepack 规范管理器版本

  • Node 16.10+ 内置 corepack,直接用它管理和激活 pnpm:

    // 全局启用
    corepack enable
    
    // 这个是为某个项目单独激活
    corepack prepare pnpm@8.10.0 --activate
    

    直接执行全局启用配合项目 packageManager 字段,团队内确保规范一致。

    {
    "packageManager": "pnpm@8.6.11"
    }
    

从 nvm 迁移到 fnm 的步骤

完全无痛,老用户请看:

  1. 卸载 nvm(可选)

    rm -rf ~/.nvm
    # 删除 .bashrc/.zshrc 里的 nvm 配置,比如有关 NVM_DIR 的行
    
  2. 安装 fnm(如前)

  3. 用 fnm 重新安装你需要的 Node 版本

    fnm install 18.17.0
    fnm install --lts
    
  4. 在项目内放置 .nvmrc.node-version

  5. 以后 node 及其包管理器相关环境隔离,切换速度飞快

全流程配置备查

  1. 安装 fnm,配置 shell,重启
  2. 每个项目根目录带 .nvmrc 写清楚所需 Node 版本
  3. .npmrc/package.json 声明所需 pnpm 版本packageManager
  4. 项目自动切 Node,自动同版本 pnpm,不再怕同事电脑不一致

总结:fnm 让你的前端工程环境“所见即所得”

fnm 用极快速度、简明自动切换、跨平台能力助你告别“环境地狱”——只需配置好 .nvmrc 和 pnpm 版本声明,所有成员落地就是统一的 Node+包管理器环境,效率提升,踩坑大幅变少,特别适合大型多项目开发团队!

想要你的团队工程环境再也不拥堵?现在就用 fnm 和自动 pnpm 管理方案升级吧!