当前位置: 首页 > news >正文

开发环境搭建-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 --> 包管理器

# 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 系统为例)
      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/

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

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

# 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命令

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

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

pnpm 初始化配置

使用pnpm setup进行初始化设置

pnpm setup

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

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

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

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

查看默认配置

pnpm config list

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

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

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源为例
http://www.lryc.cn/news/527798.html

相关文章:

  • kotlin内联函数——let,run,apply,also,with的区别
  • 【深度学习|DenseNet-121】Densely Connected Convolutional Networks内部结构和参数设置
  • 数据结构与算法-要点整理
  • Fort Firewall:全方位守护网络安全
  • Nginx实战技巧(Practical Tips for nginx)
  • YOLOv8:目标检测与实时应用的前沿探索
  • 解锁数字经济新动能:探寻 Web3 核心价值
  • Lua 环境的安装
  • Object类(2)
  • 汽车网络信息安全-ISO/SAE 21434解析(中)
  • fatal error C1083: ޷[特殊字符]ļ: openssl/opensslv.h: No such file or directory
  • C#System.Threading.Timer定时器意外回收注意事项
  • 20.Word:小谢-病毒知识的科普文章❗【38】
  • vue3底层原理和性能优化
  • Ubuntu介绍、与centos的区别、基于VMware安装Ubuntu Server 22.04、配置远程连接、安装jdk+Tomcat
  • 金融级分布式数据库如何优化?PawSQL发布OceanBase专项调优指南
  • springboot 动态线程池
  • 【PySide6快速入门】qrc资源文件的使用
  • 【creo】CREO配置快捷键方式和默认单位
  • STM32使用VScode开发
  • 数据结构与算法再探(六)动态规划
  • 若依基本使用及改造记录
  • 学习数据结构(2)空间复杂度+顺序表
  • C语言复习
  • Qt监控系统辅屏预览/可以同时打开4个屏幕预览/支持5x64通道预览/onvif和rtsp接入/性能好
  • ubuntu22安装issac gym记录
  • IDEA工具下载、配置和Tomcat配置
  • Three.js实战项目02:vue3+three.js实现汽车展厅项目
  • 动态规划——斜率优化DP
  • 【深度之眼cs231n第七期】笔记(三十一)