开发环境搭建-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.mzph.cn/web/67279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

npm:升级自身时报错:EBADENGINE

具体报错信息如下&#xff1a; 1.原因分析 npm和当前的node版本不兼容。 // 当前实际版本: Actual: {"npm":"10.2.4","node":"v20.11.0"}可以通过官网文档查看与自己 node 版本 兼容的是哪一版本的npm&#xff0c;相对应进行更新即可…

WPS数据分析000005

目录 一、数据录入技巧 二、一维表 三、填充柄 向下自动填充 自动填充选项 日期填充 星期自定义 自定义序列 1-10000序列 四、智能填充 五、数据有效性 出错警告 输入信息 下拉列表 六、记录单 七、导入数据 ​编辑 八、查找录入 会员功能 Xlookup函数 VL…

翼星求生服务器搭建【Icarus Dedicated Server For Linux】

一、前言 本次搭建的服务器为Steam平台一款名为Icarus的沙盒、生存、建造游戏,由于官方只提供了Windows版本服务器导致很多热爱Linux的小伙伴无法释怀,众所周知Linux才是专业服务器的唯一准则。虽然Github上已经有大佬制作了容器版本但是容终究不够完美,毕竟容器无法与原生L…

机器学习-线性回归(参数估计之经验风险最小化)

给定一组包含 &#x1d441; 个训练样本的训练集 我们希望能够 学习一个最优的线性回归的模型参数 &#x1d498; 现在我们来介绍线性回归的一种模型参数估计方法&#xff1a;经验风险最小化。 我们前面说过&#xff0c;对于标签 &#x1d466; 和模型输出都为连续的实数值&…

前部分知识复习02

一、物体的屏幕UV坐标 float2 ScreenUV i.pos.xy / _ScreenParams.xy; 二、抓取屏幕图像 GrabPass{" _A "} //_A为贴图图像名称 之后需在Pass中声明该贴图才能在Pass中引用此贴图 三、屏幕抓取并制作热效应代码 Shader"unity/HeatDistort 07" {Pr…

【MQ】探索 Kafka

高性能 消息的顺序性、顺序写磁盘 零拷贝 RocketMQ内部主要是使用基于mmap实现的零拷贝&#xff0c;用来读写文件 减少cpu的拷贝次数和上下文切换次数&#xff0c;实现文件的高效读写操作 Kafka 零拷贝 Kafka 使用到了 mmap 和 sendfile 的方式来实现零拷贝。分别对应 Jav…

VMware 和本机(Win10)安装共享文件

1. 安装VM-tools, sudo apt-get install open-vm-tools-desktop -y 2. VMware->设置-> 选项中启动共享文件夹. 3. 本机设置共享文件夹(文件目录为data)&#xff0c;右键属性设置: VMware&#xff0c; Other Locations->Computer->mnt->data 即可。 ps: 还有个…

2025美赛MCM数学建模A题:《石头台阶的“记忆”:如何用数学揭开历史的足迹》(全网最全思路+模型)

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ 《石头台阶的“记忆”&#xff1a;如何用数学揭开历史的足迹》 目录 《石头台阶的“记忆”&#xff1a;如何用数学揭开历史的足迹》 ✨摘要✨ ✨引言✨ 1. 引言的结构 2. 撰写步骤 &#xff08;1&#xff09;研究背景 &#…

SpringBoot-Vue整合百度地图

文章目录 一、Spring Boot整合百度地图的步骤1. 申请百度地图的AK值2. 创建实体类3. 创建Controller层4. 前端集成百度地图4.1 在Vue项目中安装百度地图Vue组件库4.2 在Vue项目中引入百度地图API4.3 创建地图组件 二、实现功能说明1. 前端部分&#xff1a;2. 后端部分&#xff…

Baklib如何优化企业知识管理实现全面数字化升级与协同创新

内容概要 Baklib 作为企业知识管理的重要工具&#xff0c;提供了一个集成化的知识中台&#xff0c;帮助企业在数字化转型过程中更高效地管理和利用其知识资产。在现代企业中&#xff0c;知识的管理和应用显得尤为重要&#xff0c;因为优秀的知识管理能够直接影响到组织的决策效…

机器学习day4

自定义数据集 使用pytorch框架实现逻辑回归并保存模型&#xff0c;然后保存模型后再加载模型进行预测 import numpy as np import torch import torch.nn as nn import torch.optim as optimizer import matplotlib.pyplot as pltclass1_points np.array([[2.1, 1.8],[1.9, 2…

天道无极:论文明兴衰中的规律自觉与文化觉醒

宇宙洪荒,星河轮转,人类文明在浩渺时空中不过沧海一粟。当我们剖开青铜器上的饕餮纹,凝视量子计算机的硅基瞳孔,会发现所有文明兴衰的背后都跃动着同一组密码——对规律的认知与驾驭程度,构成了文明存续的底层逻辑。从两河流域的楔形文字到华尔街的电子屏幕,从雅典学院的…

WPF基础 | WPF 常用控件实战:Button、TextBox 等的基础应用

WPF基础 | WPF 常用控件实战&#xff1a;Button、TextBox 等的基础应用 一、前言二、Button 控件基础2.1 Button 的基本定义与显示2.2 按钮样式设置2.3 按钮大小与布局 三、Button 的交互功能3.1 点击事件处理3.2 鼠标悬停与离开效果3.3 按钮禁用与启用 四、TextBox 控件基础4.…

解除阿里云盘压缩包分享限制的最新工具(2025年更新)

前言 前段时间&#xff0c;为了在阿里云盘分享一些资料&#xff0c;尝试了好多种方法&#xff1a;改文件名后缀&#xff0c;打包自解压&#xff0c;使用将压缩文件追加在图片文件后&#xff0c;还有的一些工具&#xff0c;虽然能伪装文件但并不太好用&#xff0c;最后自己写了…

HarmonyOS:创建应用静态快捷方式

一、前言 静态快捷方式是一种在系统中创建的可以快速访问应用程序或特定功能的链接。它通常可以在长按应用图标&#xff0c;以图标和相应的文字出现在应用图标的上方&#xff0c;用户可以迅速启动对应应用程序的组件。使用快捷方式&#xff0c;可以提高效率&#xff0c;节省了查…

21.0.2-为什么选FreeRTOS 第21章-FreeRTOS项目实战--基础知识之新建任务、启动流程、编码风格、系统配置

这个是全网最详细的STM32项目教学视频。 第一篇在这里: 视频在这里 STM32智能小车V3-STM32入门教程-openmv与STM32循迹小车-stm32f103c8t6-电赛 嵌入式学习 PID控制算法 编码器电机 跟随 **V3:HAL库开发、手把手教学下面功能&#xff1a;PID速度控制、PID循迹、PID跟随、遥控、…

12 款开源OCR发 PDF 识别框架

2024 年 12 款开源文档解析框架的选型对比评测&#xff1a;PDF解析、OCR识别功能解读、应用场景分析及优缺点比较 这是该系列的第二篇文章&#xff0c;聚焦于智能文档处理&#xff08;特别是 PDF 解析&#xff09;。无论是在模型预训练的数据收集阶段&#xff0c;还是基于 RAG…

深度剖析C++17中的std::optional:处理可能缺失值的利器

文章目录 一、基本概念与设计理念二、构建与初始化&#xff08;一&#xff09;默认构造&#xff08;二&#xff09;值初始化&#xff08;三&#xff09;使用std::make_optional&#xff08;四&#xff09;使用std::nullopt 三、访问值&#xff08;一&#xff09;value()&#x…

拟合损失函数

文章目录 拟合损失函数一、线性拟合1.1 介绍1.2 代码可视化1.2.1 生成示例数据1.2.2 损失函数1.2.3 绘制三维图像1.2.4 绘制等高线1.2.5 损失函数关于斜率的函数 二、 多变量拟合2.1 介绍2.2 代码可视化2.2.1 生成示例数据2.2.2 损失函数2.2.3 绘制等高线 三、 多项式拟合3.1 介…

基于微信小程序的移动学习平台的设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…