在前端开发中，Node.js 版本管理和包管理器的选择直接影响到开发效率和稳定性。基于目前最主流的工具，从环境配置到常见加速优化，搭建一套高效、现代的前端开发环境。

Why fnm

为什么选择 fnm 而不是 nvm？

Node.js 的版本管理工具中，nvm（Node Version Manager）使用广泛，但它由于使用shell编写在 Windows 上需要通过 nvm-windows 兼容，现在来看更像是一个临时方案，有很多性能上的问题。
而 fnm（Fast Node Manager）作为新一代工具，具有以下特点：

  • 原生支持 Windows，不需要额外适配
  • 使用 Rust 编写，启动速度极快
  • 支持 .nvmrc 和 .node-version 文件，兼容常规项目配置
  • 资源占用小，切换 Node.js 版本几乎无感知

因此，推荐在 Windows 平台直接使用 fnm 来管理 Node.js。

安装和配置fnm

安装

在 Windows 下安装 fnm 非常简单，直接执行：

1
iwr https://fnm.vercel.app/install | iex
  • 或者直接从GitHub Releases里下载最新的发布版本，放在环境变量 PATH 中即可。
  • 或者下载v1.38.1

配置

安装完成后，需要在 PowerShell 中添加环境配置。

默认需要在 PowerShell 的配置文件（profile）中添加一行：

1
fnm env --use-on-cd | Out-String | Invoke-Expression

  • 如果提示找不到 $PROFILE 文件，则需要手动创建一个：

    1
    New-Item -Path $PROFILE -ItemType File -Force

    然后用编辑器打开 $PROFILE，添加上述配置。

    完成后，重启终端，fnm 就已经可以正常使用了。

配置 Node.js 镜像源

在国内网络环境下(FK GFW)，建议切换镜像源，加速 Node.js 版本的下载

配置系统\用户环境变量：

  • 变量名：FNM_NODE_MIRROR 值： https://npmmirror.com/mirrors/node

配置 fnm 的缓存目录（可选）

如果希望 Node.js 下载和安装文件放到自定义位置，可以设置：

  • 变量名：FNM_DIR 值： `D:\your\path\fnm

.nvmrc 文件

.nvmrc 是一个简单的文本文件，里面只写一行 Node.js 的版本号，比如：

1
18.17.1

当项目中存在 .nvmrc 文件时，fnm 会自动识别并切换到指定的 Node.js 版本。这在多项目开发时非常重要，可以避免版本不一致带来的问题。

只需要在项目根目录创建 .nvmrc 文件，并填入对应的 Node.js 版本号即可。

fnm 常用命令

  • 查看可用的版本

    1
    fnm list remote [--lts]

  • 安装指定版本 Node.js：

    1
    fnm install v22.15.0

  • 使用指定版本 Node.js：

    1
    fnm use v22.15.0

  • 查看本地已安装的 Node.js：

    1
    fnm list

  • 查看当前使用的版本：

    1
    fnm current

  • 设置默认版本（进入任何目录默认使用）：

    1
    fnm default v22.15.0

  • 卸载某个 Node.js 版本：

    1
    fnm uninstall 18

why pnpm

Node.js 默认集成了 npm，但随着项目规模扩大，npm 的安装速度慢、磁盘占用大等问题逐渐显现。pnpm（Performant NPM）提供了更高效的解决方案：

  • 安装速度更快
  • 通过硬链接节省磁盘空间
  • 依赖管理更严谨，防止版本冲突

在新项目中，推荐使用 pnpm 替代 npm。

安装 pnpm

如果当前 Node.js 版本较新（16.9+），可以直接使用 corepack 安装 pnpm，无需手动下载。

先启用 corepack并准备并激活 pnpm：

1
2
corepack enable
corepack prepare pnpm@latest --activate
  • 注意这只在当前会话有效，如果想要持续有效需要运行以下命令
    1
    pnpm setup

也可以通过 npm 手动安装：

1
npm install -g pnpm

安装完成后，检查版本确认：

1
pnpm -v

npm 与 pnpm 镜像和缓存配置

配置 npm

切换到国内镜像源：

1
npm config set registry https://registry.npmmirror.com

自定义缓存目录：

1
npm config set cache D:\your\path\npm-cache

查看配置是否生效：

1
2
npm config get registry
npm config get cache

配置 pnpm

pnpm 配置镜像源：

1
pnpm config set registry https://registry.npmmirror.com

自定义缓存目录：

1
pnpm config set store-dir D:\your\path\pnpm-store

查看当前缓存目录：

1
pnpm store path

pnpm 常用命令总结

  • 安装项目依赖：

    1
    pnpm install

  • 添加一个依赖包：

    1
    pnpm add axios

  • 全局安装一个 CLI 工具：

    1
    pnpm add -g create-react-app

  • 移除一个依赖包：

    1
    pnpm remove axios

  • 更新所有依赖：

    1
    pnpm update

  • 清理缓存：

    1
    pnpm store prune

总结

通过本文的方法，在 Windows 下可以快速搭建一套现代化的前端开发环境：

  • 使用 fnm 管理 Node.js 版本，支持镜像和缓存配置
  • 使用 pnpm 替代 npm，加速依赖安装，节省磁盘空间
  • 配置镜像源，优化国内网络体验
  • 统一项目 Node.js 版本管理，避免环境不一致问题