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 的区别

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

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

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

一、安装 npm

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

1. Windows 系统

下载安装包：
- 访问 Node.js 官方下载页面。
- 选择适合你系统的 Windows 安装包（.msi 文件）。如果你使用的是 64 位系统，建议下载 64 位的安装包；如果是 32 位系统，则下载
  32 位的安装包。
运行安装程序：
- 双击下载的安装包，按照安装向导的提示进行操作。
- 在安装过程中，你可以选择安装路径等选项，一般保持默认设置即可。
验证安装：
- 安装完成后，打开命令提示符（CMD）或 PowerShell，输入以下命令验证 Node.js 和 npm 是否安装成功：
```
node -v
npm -v
```
- 如果能正确显示 Node.js 和 npm 的版本号，说明安装成功。

2. macOS 系统

使用安装包安装：
- 访问 Node.js 官方下载页面。
- 选择适合 macOS 的安装包（.pkg 文件），下载后双击运行安装程序，按照提示完成安装。
使用 Homebrew 安装：
- 如果你已经安装了 Homebrew，可以使用以下命令安装 Node.js：
```
brew install node
```
验证安装：
- 安装完成后，打开终端，输入以下命令验证 Node.js 和 npm 是否安装成功：
```
node -v
npm -v
```

3. Linux 系统（以 Ubuntu 为例）

添加 Node.js 源：
- 打开终端，运行以下命令添加 Node.js 官方源：
```
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
```
  - 这里的 18.x 是 Node.js 的版本号，你可以根据需要选择其他版本。
安装 Node.js 和 npm：
- 运行以下命令安装 Node.js 和 npm：
```
sudo apt-get install -y nodejs
```
验证安装：
- 安装完成后，输入以下命令验证 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）工具来更方便地切换镜像源。

安装 nrm：
```
npm install -g nrm
```
查看可用镜像源：
```
nrm ls
```
- 该命令会列出所有可用的镜像源，其中包括淘宝镜像（npmmirror）。
切换镜像源：
```
nrm use npmmirror
```
- 该命令会将 npm 的镜像源切换为淘宝镜像。
测试镜像源速度：
```
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. 重新安装 nvm 和 Node.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。