开发环境搭建-3:配置 JavaScript 开发环境 (fnm+ nodejs + pnpm + nrm)

在 WSL 环境中配置:WSL2 (2.3.26.0) + Oracle Linux 8.7 官方镜像

node 官网:https://nodejs.org/zh-cn/download

点击【下载】,选择想要的 node 版本、操作系统、node 版本管理器、npm包管理器

根据下面代码提示依次执行对应代码即可

基本概念说明

  1. nodejs = 可以脱离浏览器在本地运行 js 代码的环境
    = JS 解析器 + 一套用于与外部交互的底层接口(如网络、文件、存储等)
  2. node 版本管理器:允许一台电脑上安装多个不同版本的 nodejs
    --> 类比:使用 conda 或 uv 管理一台电脑上安装的多个 python 版本
  3. node 版本:当前使用版本管理器安装的版本
    与 Linux 系统版本类似,有 LTS 版本和普通版本
  4. npm 包:js 中软件包的格式
    --> 类比:python 中的 pip 包
  5. npm 包管理器:管理 npm 包的工具
    --> 类比:python 中的 pip

推荐软件包选取

其实就是官网的默认推荐内容

  1. node 版本:最新的 LTS 版本
  2. node 版本管理器:fnm
    官网介绍(github 需要梯子):https://github.com/Schniz/fnm
    使用 Rust 构建的最新一代 node 版本管理工具,轻量、速度快
  3. npm 包管理器:pnpm
    官网介绍:https://pnpm.io/zh/
    最新一代 npm 包管理器,支持缓存、文件链接等特性,性能强大且能减少依赖冗余

根据官网给出的安装教程安装

选取上面的组件,官网给出的代码(请以官网代码为准,这里只是做个参考)

总体安装顺序:nodeJS 管理器 --> 特定版本的 NodeJS --> 包管理器

bash 复制代码
# 1. 下载并安装 node 管理器,这里安装 fnm
#    Download and install fnm:
curl -o- https://fnm.vercel.app/install | bash

# 2. 更新 bash 终端,使 fnm 命令可用
source $HOME/.bashrc

# 2. 使用 node 管理器安装特定版本的 nodejs
#    Download and install Node.js:
fnm install 22

# 3. 检验 node 是否安装成功
#    Verify the Node.js version:
node -v # Should print "v22.13.1".

# 4. 安装选定的 npm 包管理器,这里选 pnpm
#    实际上在 node 20 以后,node 自带了一个 corepack 插件用于管理 npm 包管理器
#    Download and install pnpm:
corepack enable pnpm

# 5. 检验 npm 包管理器是否安装正常
#    Verify pnpm version:
pnpm -v
  1. 第一步(下载并安装 node 管理器)安装过程中需要系统安装有curlunzip软件

    1. 如果没有安装会报 Missing 然后退出(以下是有 curl 但是缺少 unzip 的情况)

    2. 使用以下指令安装(以 WSL Oracle Linux 系统为例)

      bash 复制代码
      sudo dnf install unzip curl
  2. 如果在 fnm install 和 corepack enable pnpm 时很慢,则可能是因为网络问题

    1. 需要配置梯子
    2. 也可配置 fnm 的代理和 corepack 的代理

一些配置

配置 fnm 国内镜像加速

使用清华源,参考配置:https://mirrors.tuna.tsinghua.edu.cn/help/nodejs-release/

官网配置是临时配置,重启/重新登录会失效

永久配置,修改用户环境配置文件

bash 复制代码
# 1. 打开文件
vim ~/.bashrc

# 2. 文件最后添加以下内容
export FNM_NODE_DIST_MIRROR="https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/"

# 3. 保存文件

# 4. 更新配置文件
source ~/.bashrc

# 5. 之后就可以正常使用 fnm 了

配置 corepack 的国内镜像加速

根据官网文档进行配置:https://github.com/nodejs/corepack?tab=readme-ov-file#environment-variables

配置COREPACK_NPM_REGISTRY环境变量,指定从国内源中下载 npm 包管理器

  1. 临时配置:直接在终端输入export命令

    bash 复制代码
    export COREPACK_NPM_REGISTRY ="<软件源路径>"
    
    # 示例:使用腾讯源的路径
    export COREPACK_NPM_REGISTRY="https://mirrors.cloud.tencent.com/npm/"
  2. 永久配置:将export指令放到/root/.bashrc配置文件中,并刷新配置

    bash 复制代码
    # 1. 用文本编辑器打开 /root/.bashrc 配置文件
    vim ~/.bashrc
    
    # 2. 添加这一行:将临时的指令固化为永久配置
    # 配置示例参考上面的【临时配置】
    export COREPACK_NPM_REGISTRY="<软件源路径>"
    
    # 3. 文件保存退出
    
    # 4. 刷新刚才修改的配置文件,使修改生效
    source /root/.bashrc

pnpm 初始化配置

使用pnpm setup进行初始化设置

bash 复制代码
pnpm setup

执行完成的结果示例
执行完成后,需要依照执行结果,更新 bash(就是运行上面截图最后一行的指令 source XXX)

配置 pnpm 的国内镜像加速(使用 mrn 管理)

参考文章:https://ksh7.com/posts/npm-registry

使用 mrn 这个 npm 包进行镜像加速,这里配置的是阿里淘宝源

查看默认配置

bash 复制代码
pnpm config list

可看到软件源registry是国外的官网

使用包管理器(pnpm)安装nvm

bash 复制代码
pnpm add -g nrm
  1. 如果遇到 Unable to find the global bin directory(无法找到全局软件包路径)这种问题

    请参考上面的章节,先进行 pnpm 的初始化

安装成功示例(最后有个 Done,其中间没有 ERROR 提示)

运行nrm进行换源,相关指令

  • 帮助:mrn -h
  • 查看当前使用的源:nrm current
  • 查看当前可替换的源:nrm ls 列表输出的左列为源名称
  • 设置要使用的源:nvm use 源名称
    下面截图以taobao源为例
相关推荐
云边有个稻草人1 分钟前
【Linux系统】第八节—进程概念(上)—冯诺依曼体系结构+操作系统+进程及进程状态+僵尸进程—详解!
linux·进程·冯诺依曼体系结构·pcb·僵尸进程·进程的状态·task_ struct
海的诗篇_2 分钟前
移除元素-JavaScript【算法学习day.04】
javascript·学习·算法
__Yx__5 分钟前
JavaScript核心概念输出——原型链
javascript
xian0gang11 分钟前
rk3588 区分两个相同的usb相机
linux
这儿有一堆花21 分钟前
安全访问家中 Linux 服务器的远程方案 —— 专为单用户场景设计
linux·服务器·安全
挑战者66688837 分钟前
vue入门环境搭建及demo运行
前端·javascript·vue.js
RussellFans1 小时前
Linux 文本三剑客(grep, awk, sed)
linux·运维·服务器
猴哥聊项目管理1 小时前
什么是DevOps智能平台的核心功能?
运维·项目管理·制造·devops·软件·项目管理软件·软件分享
Chuncheng's blog1 小时前
CentOS 7如何编译安装升级gcc至7.5版本?
linux·运维·c++·centos
听风吹等浪起1 小时前
CentOS在vmware局域网内搭建DHCP服务器【踩坑记录】
linux·服务器·centos