HTML-05NPM使用踩坑

2025-03-04-NPM使用踩坑

本文讲述了一个苦逼程序员在使用NPM的时候突然来了一记nmp login天雷,然后一番折腾之后,终究还是没有解决npm的问题😞😞😞,最终使用cnpm完美解决的故事。

文章目录

  • 2025-03-04-NPM使用踩坑
    • @[toc]
    • 1-参考网址
    • 2-思路整理
    • 3-学习要点
    • 4-对比学习
      • 1-什么是npm、cnpm两者之间的区别
        • 1-npm 概述
        • 2-cnpm 概述
        • 3-npm 和 cnpm 的区别
      • 2-如何使用npm并配置国内镜像源
        • 一、安装 npm
          • 1. Windows 系统
          • 2. macOS 系统
          • 3. Linux 系统(以 Ubuntu 为例)
        • 二、更换 npm 镜像源为淘宝镜像
          • 1. 临时更换
          • 2. 永久更换
          • 3. 恢复默认镜像源
          • 4. 使用 nrm 管理镜像源
        • 三、常见问题与解决方案
          • 问题 1:输入 `npm login` 直接跳转到 Sign in to CNPM
          • 问题 2:使用 `https` 地址时报错 `request to https://registry.npmjs.org/-/v1/login failed, reason: connect ETIMEDOUT`
          • 问题 3:报错 `Unexpected token ‘.’`
          • 问题 4:安装包时速度慢或失败。
      • 3-如何使用cnpm并配置国内镜像源
        • 1-安装 cnpm
        • 2-全局安装 cnpm
        • 3-验证安装
        • 4-确保 cnpm 使用淘宝镜像
        • 5-查看当前镜像源
        • 6-手动设置为淘宝镜像源

1-参考网址

  • NpmLogin问题汇总:https://blog.csdn.net/HurryUpp/article/details/134928293

2-思路整理

  • 1)[X]遇到需要npmLogin的权限报错->网友推荐更换国内镜像
  • 2)[X]但是我跟着小跑一路都没有解决->果断放弃npm
  • 3)[√]最终解决方案->使用cnpm完美解决
  • 4)[√]如果cnpm遇到下载不了的包->使用pnpm完美解决

3-学习要点

  • 1)什么是npm、cnpm两者之间的区别?->NodeJs依赖管理

  • 2)如何使用npm并配置国内镜像源

  • 3)如何使用cnpm并配置国内镜像源

  • 4)核心操作

# 1)安装cnpm-已安装可跳过
- 下载安装cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com
- 使用cnpm下载
cnpm install typescript


# 2)安装pnpm-已安装可跳过
- 下载安装pnpm
npm install -g pnpm --registry=https://registry.npmmirror.com
- 使用cnpm下载
pnpm install typescript


# 3)如果需要更新源
npm config set registry https://registry.npm.taobao.org/
npm config set registry https://registry.npmmirror.com/
npm config set registry https://registry.npmjs.org/

4-对比学习

1-什么是npm、cnpm两者之间的区别

1-npm 概述

npm 是 Node.js 的包管理器(Node Package Manager),它随着 Node.js 一起安装,是 JavaScript
生态系统中管理项目依赖和共享代码的重要工具。其核心功能与作用体现在以下多个方面:

  • 依赖管理npm 可以帮助开发者方便地安装、更新和删除项目所依赖的软件包。例如,在开发一个基于 React
    的前端项目时,你可以使用 npm install react react-dom 命令来安装 React 和 React DOM 这两个核心库。
  • 版本控制npm 支持语义化版本号(SemVer),可以精确指定项目依赖的软件包版本。在 package.json
    文件中,你可以看到类似 "react": "^18.2.0" 这样的版本声明,其中 ^ 表示兼容该主版本号下的最新版本。
  • 脚本执行npm 允许在 package.json 中定义脚本,通过 npm run
    命令来执行这些脚本。比如,你可以定义一个启动开发服务器的脚本 "start": "webpack-dev-server --open"
    ,然后使用 npm run start 来启动开发服务器。
  • 包发布:开发者可以将自己编写的软件包发布到 npm
    公共注册表(registry.npmjs.org),供其他开发者使用。发布后,其他开发者就可以通过 npm install 命令来安装使用你的包。

2-cnpm 概述

cnpm 是淘宝团队基于 npm 定制的一个镜像版本的包管理器,其目的主要是为了解决国内开发者在使用 npm 安装依赖包时网络速度慢、不稳定的问题。

  • 镜像源cnpm 使用了淘宝的镜像源(https://registry.npmmirror.com ),该镜像源会定期同步 npm
    官方注册表的内容,确保软件包的版本和内容与官方一致。
  • 安装使用:你可以通过 npm install -g cnpm --registry=https://registry.npmmirror.com 命令来全局安装 cnpm
    ,安装完成后就可以像使用 npm 一样使用 cnpm 来管理项目依赖。

3-npm 和 cnpm 的区别
  1. 镜像源
    • npm:默认使用的是官方的注册表(registry.npmjs.org),由于服务器位于国外,在国内访问时可能会受到网络限制,导致下载速度较慢,甚至出现连接超时的情况。
    • cnpm:使用的是淘宝的镜像源(https://registry.npmmirror.com ),该镜像源位于国内,下载速度通常比官方源快很多,尤其是对于一些体积较大的软件包,优势更为明显。
  2. 兼容性
    • npm:是 Node.js 官方推荐的包管理器,与 Node.js 生态系统的兼容性最好,能够保证安装的软件包与官方发布的版本完全一致。
    • cnpm:虽然大部分情况下与 npm 兼容,但由于是基于 npm
      定制的,可能会存在一些细微的差异。在某些特殊场景下,可能会出现安装的软件包与使用 npm 安装的版本不完全一致的情况,从而导致一些兼容性问题。
  3. 社区支持
    • npm:作为 Node.js 官方的包管理器,拥有庞大的社区支持,几乎所有的 Node.js 项目都会使用 npm
      来管理依赖。在遇到问题时,更容易在社区中找到相关的解决方案。
    • cnpm:主要是为国内开发者提供便利,社区支持相对较少。如果遇到与 cnpm
      相关的问题,可能在社区中找到的解决方案不如 npm 多。
  4. 命令使用
    • npm:命令使用广泛且标准,很多教程、文档和开源项目都是基于 npm 来编写命令示例的。
    • cnpm:命令与 npm 基本相同,但在一些企业级项目或者对依赖管理要求严格的场景中,可能会优先选择 npm
      ,而在个人开发或者对网络速度要求较高的场景中,cnpm 是一个不错的选择。

2-如何使用npm并配置国内镜像源

在前端开发中,npm(Node Package Manager)是 Node.js
的官方包管理工具,用于安装、共享和管理项目依赖。本文将详细介绍如何安装 npm、更换镜像源(以淘宝镜像为例),以及解决常见问题。

一、安装 npm

npm 通常会随 Node.js 一起安装,因此我们只需安装 Node.js 即可。

1. Windows 系统
  1. 下载安装包

    • 访问 Node.js 官方下载页面。
    • 选择适合你系统的 Windows 安装包(.msi 文件)。如果你使用的是 64 位系统,建议下载 64 位的安装包;如果是 32 位系统,则下载
      32 位的安装包。
  2. 运行安装程序

    • 双击下载的安装包,按照安装向导的提示进行操作。
    • 在安装过程中,你可以选择安装路径等选项,一般保持默认设置即可。
  3. 验证安装

    • 安装完成后,打开命令提示符(CMD)或 PowerShell,输入以下命令验证 Node.jsnpm 是否安装成功:
      node -v
      npm -v
      
    • 如果能正确显示 Node.jsnpm 的版本号,说明安装成功。
2. macOS 系统
  1. 使用安装包安装

    • 访问 Node.js 官方下载页面。
    • 选择适合 macOS 的安装包(.pkg 文件),下载后双击运行安装程序,按照提示完成安装。
  2. 使用 Homebrew 安装

    • 如果你已经安装了 Homebrew,可以使用以下命令安装 Node.js
      brew install node
      
  3. 验证安装

    • 安装完成后,打开终端,输入以下命令验证 Node.jsnpm 是否安装成功:
      node -v
      npm -v
      
3. Linux 系统(以 Ubuntu 为例)
  1. 添加 Node.js 源

    • 打开终端,运行以下命令添加 Node.js 官方源:
      curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
      
      • 这里的 18.x 是 Node.js 的版本号,你可以根据需要选择其他版本。
  2. 安装 Node.js 和 npm

    • 运行以下命令安装 Node.js 和 npm:
      sudo apt-get install -y nodejs
      
  3. 验证安装

    • 安装完成后,输入以下命令验证 Node.js 和 npm 是否安装成功:
      node -v
      npm -v
      
二、更换 npm 镜像源为淘宝镜像

由于网络原因,直接使用官方 npm
镜像源可能会导致安装速度较慢。我们可以将镜像源更换为淘宝镜像(现称为中国镜像,地址为 https://registry.npmmirror.com)。

1. 临时更换

如果你只需要临时使用淘宝镜像源来安装某个包,可以在安装命令中指定镜像源:

npm install <package-name> --registry=https://registry.npmmirror.com
  • <package-name> 替换为你要安装的包名。
2. 永久更换

如果你希望每次使用 npm 都默认使用淘宝镜像源,可以使用以下命令进行配置:

npm config set registry https://registry.npmmirror.com
  • 你可以通过以下命令验证镜像源是否已经成功更换:
    npm config get registry
    
    • 如果输出为 https://registry.npmmirror.com,则说明镜像源已经成功更换。
3. 恢复默认镜像源

如果你想恢复到 npm 的默认镜像源,可以使用以下命令:

npm config set registry https://registry.npmjs.org
4. 使用 nrm 管理镜像源

除了直接使用 npm config 命令来管理镜像源,你还可以使用 nrm(npm registry manager)工具来更方便地切换镜像源。

  1. 安装 nrm

    npm install -g nrm
    
  2. 查看可用镜像源

    nrm ls
    
    • 该命令会列出所有可用的镜像源,其中包括淘宝镜像(npmmirror)。
  3. 切换镜像源

    nrm use npmmirror
    
    • 该命令会将 npm 的镜像源切换为淘宝镜像。
  4. 测试镜像源速度

    nrm test npmmirror
    
    • 该命令会测试淘宝镜像源的响应速度,帮助你选择最快的镜像源。
三、常见问题与解决方案
问题 1:输入 npm login 直接跳转到 Sign in to CNPM
  • 原因:使用了淘宝的镜像地址(https://registry.npmmirror.com/https://r.cnpmjs.org/)。
  • 解决方法
    • 将镜像地址改回官方地址:
      npm config set registry http://registry.npmjs.org/
      
      • 注意使用 http 地址,而不是 https 地址。
问题 2:使用 https 地址时报错 request to https://registry.npmjs.org/-/v1/login failed, reason: connect ETIMEDOUT
  • 原因:官方镜像源的 https 地址可能在国内网络环境下无法正常访问。
  • 解决方法
    • 将镜像地址改为 http 地址:
      npm config set registry http://registry.npmjs.org/
      
问题 3:报错 Unexpected token ‘.’
  • 原因nvm(Node Version Manager)版本过低,导致 Node.js 版本也不兼容。
  • 解决方法
    1. 卸载所有 Node.js 版本:
      nvm uninstall --all
      
    2. 卸载 nvm
      • Node.js 安装目录中运行 unins000.exe
    3. 重新安装 nvmNode.js
问题 4:安装包时速度慢或失败。
    • 解决方法:更换为淘宝镜像源(https://registry.npmmirror.com),或者使用 nrm 测试并选择最快的镜像源。

3-如何使用cnpm并配置国内镜像源

1-安装 cnpm

cnpm 是淘宝团队基于 npm 定制的一个包管理工具,其镜像源默认指向淘宝镜像,方便国内开发者使用。以下是安装 cnpm 的步骤:

2-全局安装 cnpm

在命令行工具(如 Windows 的命令提示符、macOS 或 Linux 的终端)中执行以下命令来全局安装 cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

上述命令中,-g 表示全局安装,--registry=https://registry.npmmirror.com 是指定在安装 cnpm 时使用淘宝镜像源(现称中国镜像),以加快安装速度。

3-验证安装

安装完成后,可以通过查看 cnpm 版本号来验证是否安装成功,执行以下命令:

cnpm -v

如果能正确显示 cnpm 的版本信息,说明安装成功。


4-确保 cnpm 使用淘宝镜像

一般情况下,安装 cnpm 后它默认使用的就是淘宝镜像(https://registry.npmmirror.com)。但为了确保万无一失,你可以通过以下方式进行确认和更改:

5-查看当前镜像源

使用以下命令查看 cnpm 当前使用的镜像源:

cnpm config get registry

如果输出结果是 https://registry.npmmirror.com,则表示已经使用淘宝镜像源。

6-手动设置为淘宝镜像源

若查看的镜像源不是淘宝镜像源,可以使用以下命令将其设置为淘宝镜像源:

cnpm config set registry https://registry.npmmirror.com

设置完成后,再次使用 cnpm config get registry 命令进行验证,确保输出为 https://registry.npmmirror.com


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/983169.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java后端开发day27--常用API(二)正则表达式爬虫

&#xff08;以下内容全部来自上述课程&#xff09; 1.正则表达式&#xff08;regex&#xff09; 可以校验字符串是否满足一定的规则&#xff0c;并用来校验数据格式的合法性。 1.作用 校验字符串是否满足规则在一段文本中查找满足要求的内容 2.内容定义 ps&#xff1a;一…

鸿蒙HarmonyOS评论功能小demo

评论页面小demo 效果展示 1.拆解组件&#xff0c;分层搭建 我们将整个评论页面拆解为三个组件&#xff0c;分别是头部导航&#xff0c;评论项&#xff0c;回复三个部分&#xff0c;然后统一在index界面导入 2.头部导航界面搭建 Preview Component struct HmNavBar {// 属性&a…

智能机器人学习机WT3000A AI芯片方案-自然语音交互 打造沉浸式学习体验

一、概述 当AI浪潮席卷全球&#xff0c;教育领域也未能幸免。AI学习机&#xff0c;这个打着“个性化学习”、“精准提分”旗号的新兴产品&#xff0c;正以惊人的速度占领市场。从一线城市到偏远乡镇&#xff0c;从学龄前儿童到高考备考生&#xff0c;AI学习机的广告铺天盖地&am…

鸿蒙与DeepSeek深度整合:构建下一代智能操作系统生态

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/north 目录 技术融合背景与价值鸿蒙分布式架构解析DeepSeek技术体系剖析核心整合架构设计智能调度系统实现…

【UCB CS 61B SP24】Lecture 22 23: Tree and Graph Traversals, DFS, BFS 学习笔记

本文讲解了二叉树的四种遍历方式&#xff0c;以及如何通过前/后序遍历与中序遍历重建出二叉树&#xff0c;接着介绍了新的非线性数据结构&#xff1a;图&#xff0c;详细讲解了图的存储方式与遍历方式&#xff0c;最后使用 Java 基于邻接表的存储方式实现了图与 DFS、BFS 两种遍…

GCC RISCV 后端 -- C语言语法分析过程

在 GCC 编译一个 C 源代码时&#xff0c;先会通过宏处理&#xff0c;形成 一个叫转译单元&#xff08;translation_unit&#xff09;&#xff0c;接着进行语法分析&#xff0c;C 的语法分析入口是 static void c_parser_translation_unit(c_parser *parser); 接着就通过类似递…

Swagger-01.介绍和使用方式

一.Swagger介绍 有了接口文档&#xff0c;我们就可以根据接口文档来开发后端的代码了。如果我们开发完了某个功能&#xff0c;后端如何验证我们开发的是否正确呢&#xff1f;我们就需要测试&#xff0c;使用Swagger就可以帮助后端生成接口文档&#xff0c;并且可以进行后端的接…

MAVEN的环境配置

在下载好maven后或解压maven安装包后进行环境配置 1.在用户环境变量中 新建一个MAVEN_HOME 地址为MAVEN目录 注&#xff1a;地址为解压后maven文件的根目录&#xff01;&#xff01;&#xff01; 2.在系统环境变量的path中添加该变量 %MAVEN_HOME%\bin 3. 测试maven安装是否成…

分布式存储学习——HBase概述

1.1 HBase概述 1.1.1 理解大数据背景 1.1.2 HBase是什么 1.1.3 HBase与Hadoop的关系 1.1.4 HBase的核心功能模块 1.1.5 HBase的应用场景和经典案例 1.1.6 小结 本文参考于学校《HBase应用于开发》教材 1.1 HBase概述 本节将介绍大数据背景和HBase的基本概念&#xff0c…

TypeError: Assignment to constant variable.

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 &#x1f35a; 蓝桥云课签约作者、…

Chain of Draft: 借鉴人类草稿思维让大型语言模型更快地思考

这个研究探讨了大型语言模型&#xff08;LLMs&#xff09;在执行复杂推理任务时面临的计算资源消耗与响应延迟问题。研究特别聚焦于思维链&#xff08;Chain-of-Thought, CoT&#xff09;提示范式的效率局限性。CoT虽然有效&#xff0c;但在推理过程中需要生成冗长、详尽的逐步…

从零开始实现大语言模型(十三):预训练大语言模型GPTModel

1. 前言 使用梯度下降算法通过下一个token预测任务预训练大语言模型GPTModel&#xff0c;前向传播流程每次会输入一个batch的长度均为context_len的训练样本&#xff0c;执行 batch_size context_len \text{batch\_size}\times\text{context\_len} batch_sizecontext_len次下…

vue3:初学 vue-router 路由配置

承上一篇&#xff1a;nodejs&#xff1a;express js-mdict 作为后端&#xff0c;vue 3 vite 作为前端&#xff0c;在线查询英汉词典 安装 cnpm install vue-router -S 现在讲一讲 vue3&#xff1a;vue-router 路由配置 cd \js\mydict-web\src mkdir router cd router 我还…

档案AI审核1

需求&#xff1a; 处理扫描件和图像档案&#xff0c;解决AI决策能力&#xff0c;引入NLP和CV技术&#xff0c;形成多层次审核体系&#xff0c;解析jpg内容并校验结构&#xff0c;自定义训练审核模型&#xff0c;智能档案合规性检查&#xff0c;档案自动化审核&#xff0c;标注…

MC9S12单片机上电初始化过程及BOOTLOADER分析

上电过程 上电后&#xff0c;CPU从固定的位置读取复位向量。 这个固定的位置就是0xFFFE。是芯片厂商出厂时预设好的。 这个地址是NON_BANKED的。这个位置保存的是复位向量&#xff0c;实际上就是一个函数指针。该函数指针指向_Startup()函数。 map文件: 注意&#xff1a;程序…

Oxidized收集H3C交换机网络配置报错,not matching configured prompt (?-mix:^(<CD>)$)

背景&#xff1a;问题如上标题&#xff0c;H3C所有交换机配置的model都是comware 解决方案&#xff1a; 1、找到compare.rb [rootoxidized model]# pwd /usr/local/lib/ruby/gems/3.1.0/gems/oxidized-0.29.1/lib/oxidized/model [rootoxidized model]# ll comware.rb -rw-r--…

【算法方法总结·四】字符串操作的一些技巧和注意事项

【算法方法总结四】字符串操作的一些技巧和注意事项 【算法方法总结一】二分法的一些技巧和注意事项【算法方法总结二】双指针的一些技巧和注意事项【算法方法总结三】滑动窗口的一些技巧和注意事项【算法方法总结四】字符串操作的一些技巧和注意事项 【字符串操作】 此章节涉…

Halcon 算子 一维码检测识别、项目案例

首先我们要明白码的识别思路 把窗口全部关闭读取新的图片图像预处理创建条码模型设置模型参数搜索模型获取条码结果显示条码结果 图像预处理和条码增强 对比度太低&#xff1a; scale_image&#xff08;或使用外部程序scale_image_range&#xff09;,增强图像的对比度图像模糊…

STM32使用有源蜂鸣器

1.1 介绍&#xff1a; 有源蜂鸣器&#xff1a;内部自带振荡源&#xff0c;将正负极接上直流电压即可持续发声&#xff0c;频率固定 无源蜂鸣器&#xff1a;内部不带振荡源&#xff0c;需要控制器提供振荡脉冲才可发声&#xff0c;调整提供振荡脉冲的频率&#xff0c;可发出不同…

人工智能之数学基础:对线性代数中逆矩阵的思考?

本文重点 逆矩阵是线性代数中的一个重要概念,它在线性方程组、矩阵方程、动态系统、密码学、经济学和金融学以及计算机图形学等领域都有广泛的应用。通过了解逆矩阵的定义、性质、计算方法和应用,我们可以更好地理解和应用线性代数知识,解决各种实际问题。 关于逆矩阵的思…