HTML-05NPM使用踩坑

2025-03-04-NPM使用踩坑

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

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.js 和 npm 是否安装成功：

     node -v
     npm -v
     

   • 如果能正确显示 Node.js 和 npm 的版本号，说明安装成功。

2. macOS 系统

1. 使用安装包安装：

   • 访问 Node.js 官方下载页面。
   • 选择适合 macOS 的安装包（.pkg 文件），下载后双击运行安装程序，按照提示完成安装。

2. 使用 Homebrew 安装：

   • 如果你已经安装了 Homebrew，可以使用以下命令安装 Node.js：

     brew install node
     

3. 验证安装：

   • 安装完成后，打开终端，输入以下命令验证 Node.js 和 npm 是否安装成功：

     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

• 将 替换为你要安装的包名。

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. 重新安装 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。

---