1.[SOP]搭建前端npm环境

whoway2026/1/5大约 6 分钟

1.[SOP]搭建前端npm环境

-解决前后端分离开发协作问题

目标最佳实践：

1、安装nvm去解决，NVM 负责“哪个 Node”
2、虽然NRM 负责“从哪里下载包”（换源），但是我使用shell函数去替代nrm，就不安装nrm了！比nrm还好用
3、直接使用最标准的npm包管理工具而不是cnpm和yarn
4、在使用npm命令的时候，在前面加上NPX命令，因为npx命令是 Node.js 自带的一个命令行工具，用来临时执行 npm 包中的命令。推荐用 npx 执行“项目相关或一次性工具”，而不是直接用 npm（或全局安装后的命令），是为了版本一致、零安装、少污染、少踩坑

步骤1.安装nvm+给nvm换源

mac电脑安装npm好多种方法，好几种都有坑！
最终结论：最推荐：nvm（Node Version Manager）安装npm最好了! 因为项目常常需要不同的 Node 版本（如 Vue2 用 14.x，React 18 用 16+/18+）多人协作常配 .nvmrc 版本锁，避免“你能跑我不能跑”，用户级安装，不污染系统
其他安装npm的技术对比，告诉你为什么不行？
【最不建议】最坑-使用官网的pkg包：https://nodejs.org/zh-cn
一台电脑只能装一个版本，不适合频繁切换项目的前端开发节奏！
.pkg 安装版本写死在系统目录（/usr/local），难以优雅卸载
使用homebrew
brew 装的 Node 和其他包容易混在一起出问题，比如路径混乱、权限错乱

类型1.Mac安装nvm

参考文档：如果想要mac下安装：https://nvm.p6p.net/install/mac.html

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

类型2.Linux安装nvm

步骤1：原理：这个脚本会自动下载 NVM，并将其添加到你的 shell 配置文件（如 .bashrc、.zshrc 或 .profile）中

能访问github的话，使用这条命令

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

不能访问github的话，可以用下面这条【使用gitee】

curl -o- https://gitee.com/RubyMetric/nvm-cn/raw/main/install.sh | bash

然后执行下面的两条命令即可

chmod +x ~/.nvm/nvm.sh

如果你使用的是 wget

能访问github的话

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

步骤2：安装脚本完成后，你需要重新加载 shell 配置文件，使 NVM 命令在当前会话中可用

加载 NVM

source ~/.bashrc

如果你使用的是其他 shell，例如 zsh：

source ~/.zshrc

给nvm换源到国内
注意：请切换国内镜像后再安装 node 版本，否则会很慢
方法1，改写nvm配置文件：
如果下载 node 过慢或者安装失败，那么要更换国内镜像源, 在 nvm 的安装路径下，找到 settings.txt文件，设置node_mirror与npm_mirror为国内镜像地址。下载就飞快了，在文件末尾加入：

- 阿里云镜像
  node_mirror: https://npmmirror.com/mirrors/node/
  npm_mirror: https://npmmirror.com/mirrors/npm/
- 腾讯云镜像
  node_mirror: http://mirrors.cloud.tencent.com/npm/
  npm_mirror: http://mirrors.cloud.tencent.com/nodejs-release/

方法2，使用命令行切换：

参考自nvm的官方文档：https://www.nvmnode.com/zh/cli/#google_vignette

# 设置node镜像。默认是https://nodejs.org/dist/。如果不写url，
# 则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。
nvm node_mirror [url]

# 设置npm镜像。https://github.com/npm/cli/archive/。
# 如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。
nvm npm_mirror [url]
# 阿里云镜像
nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/

# 腾讯云镜像
nvm npm_mirror http://mirrors.cloud.tencent.com/npm/
nvm node_mirror http://mirrors.cloud.tencent.com/nodejs-release/

步骤2.解决nvm卡顿问题【技巧】

目标效果：只让 nvm 初始化只在交互式 shell 执行，这样 IDE 或脚本启动不会卡住，也不会报 “无法在合理的时间内解析 shell 环境”。在最后写上下面的shell到.zshrc或者.bashrc
因为开发人员很可能还有一堆的变量设置，所以封装了1个函数！

# 只让 nvm 初始化只在交互式 shell 执行，这样 IDE 或脚本启动不会卡住
# 也不会报 “无法在合理的时间内解析 shell 环境”
# ==========================
# 判断是否为交互式 shell
# ==========================
is_interactive_shell() {
[[ $- == *i* ]]
}

# ==========================
# NVM 初始化（只在交互式 shell 执行）
# ==========================
if is_interactive_shell; then
# NVM 配置
export NVM_DIR="$HOME/.nvm"

# 加载 nvm
if [ -s "/opt/homebrew/opt/nvm/nvm.sh" ]; then
\. "/opt/homebrew/opt/nvm/nvm.sh"
fi

# nvm 自动补全（可选）
if [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ]; then
\. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"
fi
fi

步骤3.借助shell函数完成npm换源和测速而不是nrm

我设想的理想效果：
1、切换 Node 版本但 nrm 命令始终存在
2、能一条命令自己主导切换所有nvm切换的npm 的 registry！
为什么不采用传统的：安装全局的nrm呢？
比如nrm官方文档：https://www.npmjs.com/package/nrm
因为npm install -g nrm只会安装到nvm use命令当前激活的 Node 版本对应的 npm 全局环境里，换个use的版本就报错了，比如

npm install -g nrm

所以还是会出现

nvm use 16  # 有 nrm
nvm use 18  # nrm command not found ❌

虽然nrm很香，但是还是没有最理想的那种使用

nrm add taobao https://registry.npmmirror.com/
nrm add tencent https://mirrors.cloud.tencent.com/npm/

查看可用的源

nrm ls

切换到淘宝源
nrm use taobao

# 切换到官方源
nrm use npm

最理想的效果

写到你的.zshrc或者.bashrc即可



# 腾讯云 npm 镜像
npm_tencent() {
    npm config set registry https://mirrors.cloud.tencent.com/npm/
    echo "✔ npm registry -> Tencent Cloud"
}

# 阿里云（npm 官方中国镜像，推荐）
npm_aliyun() {
    npm config set registry https://registry.npmmirror.com/
    echo "✔ npm registry -> Aliyun (npmmirror)"
}

# 华为云 npm 镜像
npm_huawei() {
    npm config set registry https://mirrors.huaweicloud.com/repository/npm/
    echo "✔ npm registry -> Huawei Cloud"
}

# npm 官方源
npm_npm() {
    npm config set registry https://registry.npmjs.org/
    echo "✔ npm registry -> npmjs.org"
}


# 加一个“查看当前镜像”的命令
npm_registry() {
  npm config get registry
}

还可以推荐版本（替代 nrm test）

npm_test() {
  local registries=(
    "npm https://registry.npmjs.org/"
    "aliyun https://registry.npmmirror.com/"
    "tencent https://mirrors.cloud.tencent.com/npm/"
    "huawei https://mirrors.huaweicloud.com/repository/npm/"
)

echo "Testing npm registries (curl)"
echo "--------------------------------"

for item in "${registries[@]}"; do
name=$(echo "$item" | awk '{print $1}')
url=$(echo "$item" | awk '{print $2}')

    printf "%-8s : " "$name"

    time=$(curl -o /dev/null -s -w "%{time_total}" \
      --connect-timeout 3 \
      --max-time 3 \
      "$url")

    if [ $? -eq 0 ]; then
      # 秒 → 毫秒（兼容 macOS，不用 date）
      ms=$(echo "$time * 1000" | bc | cut -d. -f1)
      echo "${ms} ms"
    else
      echo "timeout ❌"
    fi
done
}

linux如何看某个shell函数本身长啥样？有没有命令？

方法1

declare -f 函数名

方法2

type（万能查看来源命令）
比如：type npm_test
一眼能看出是 函数 / alias / 内建 / 外部命令

附录1.使用nvm的.nvmrc文件

参考官方文档：https://www.nvmnode.com/zh/extend/nvmrc.html
当开发多个项目时，每个项目运行环境要求的 node 版本不一样，那么我们就需要给每个项目指定 node 版本，也就是通过终端执行 nvm install 和 nvm use 命令去安装并切换版本。但是每次都要在终端手动执行命令就很麻烦，特别是项目越来越多的时候，容易忘记切换版本或切换错版本，会导致项目启动不了或运行中有一些错误。
注意，需要再配合1个读取这个.nvmrc的脚本才能自动切换哈！这个文件只是提醒你到时候使用这个nvm版本!

附录2.安装百度的fis工具

https://github.com/fex-team/fis3

附录3.怎么发布一个 npm 包到npm官方的registry

步骤1：创建 npm 账户
1.打开：https://www.npmjs.com/，然后选择 sign up 进入账户注册页面
2.根据提示填写注册信息,点击注册后，填写的邮箱会收到一个验证码，输入验证码后即可完成注册。
后续步骤：

完整资料：https://juejin.cn/post/7062968467351142413