头像 One
头像 One

更多功能请点顶栏「快捷菜单」

前端 +1 nodejs 3232 字 13 分钟 -- 次

npm和pnpm

最后更新于:

npm和pnpm

目录

[toc]

npm常用命令

 1npm install <moduleName> -g   包安装到全局
 2npm list：查看当前已安装的包。
 3npm config set registry https://mirrors.huaweicloud.com/repository/npm/   #设置淘宝源
 4npm config set cache  "/opt/npmcache/"   #设置缓存路径
 5
 6#构建项目
 7npm install && npm run build
 8
 9#更新依赖
10运行 `npm update` 或 `yarn upgrade` 来更新你的依赖

pnpm常用命令

pnpm 是一个快速、节省磁盘空间的包管理器，它使用内容可寻址存储来共享依赖项。以下是一些常用的 pnpm 命令：

常用命令

 1#启动服务
 2pnpm install && pnpm run dev
 3
 4#构建输出dist
 5pnpm build
 6
 7
 8#查看 默认的pnpm源
 9pnpm config get registry 
10#配置pnpm的源为华为源
11pnpm config set registry https://mirrors.huaweicloud.com/repository/npm/
12#切换回官方源
13pnpm config set registry https://registry.npmjs.org/ 
14
15
16#pnpm卸载/安装包
17pnpm uninstall husky
18pnpm install husky

安装和管理依赖

  1. 安装所有依赖项：

    1pnpm install

  2. 安装一个包：

    1pnpm add <package-name>

  3. 安装一个包作为开发依赖：

    1pnpm add <package-name> --save-dev

  4. 全局安装一个包：

    1pnpm add <package-name> --global

  5. 移除一个包：

    1pnpm remove <package-name>

  6. 更新所有依赖项：

    1pnpm update

  7. 更新一个包：

    1pnpm update <package-name>

运行脚本

  1. 运行项目中的脚本：

    1pnpm run <script-name>

  2. 运行测试脚本：

    1pnpm test

  3. 运行开发服务器：

    1pnpm start

管理项目

  1. 初始化一个新的 pnpm 项目：

    1pnpm init

  2. 查看已安装的包及其依赖关系：

    1pnpm list

  3. 查看全局安装的包：

    1pnpm list --global

  4. 查看包的详细信息：

    1pnpm view <package-name>

缓存和存储

  1. 清理缓存：

    1pnpm store prune

  2. 查看存储路径：

    1pnpm store path

其他

  1. 查看 pnpm 版本：

    1pnpm --version

  2. 获取帮助：

    1pnpm help

问题：npm和pnpm有啥区别？

npm 和 pnpm 是 JavaScript 包管理工具，但它们在一些关键方面存在差异。以下是它们的主要区别：

安装方式和速度

  1. npm：

    • 默认的包管理工具，随 Node.js 一起安装。
    • 采用扁平化安装，所有包都会被安装到 node_modules 文件夹中。这可能导致重复的包和较大的 node_modules 目录。
    • 速度相对较慢，因为它会为每个包下载一个副本，即使这些包之间有依赖关系。

  2. pnpm：

    • 使用符号链接来共享包，避免重复安装相同的包。每个包只会安装一次，然后在项目中通过符号链接来引用这个包。
    • 安装速度更快，磁盘空间使用更少，因为它重用了已经安装的包。
    • 通过去重和缓存机制，提高了安装效率。这个特性在大型项目中尤为明显。

安全性

  1. npm：

    • 默认行为允许安装包的嵌套依赖，这可能会导致重复包和版本冲突。
    • 使用 npm audit 提供安全审计功能，帮助用户发现和修复项目中的安全漏洞。

  2. pnpm：

    • 通过符号链接和去重机制，可以避免不同版本的包相互干扰，这在某种程度上提高了安全性和版本一致性。
    • 也支持安全审计功能。

锁文件

  1. npm：

    • 使用 package-lock.json 文件来锁定依赖版本，确保项目在不同环境中的依赖关系一致。

  2. pnpm：

    • 使用 pnpm-lock.yaml 文件来锁定依赖版本。这个锁文件不仅包含包的版本信息，还包含包的存储位置和符号链接信息。

工作空间支持

  1. npm：

    • 从 npm v7 开始支持工作空间（workspaces），允许在一个项目中管理多个子项目。

  2. pnpm：

    • 也支持工作空间，并且由于其高效的包管理机制，使得在工作空间中共享依赖变得更加容易和高效。

配置和命令

  1. npm：

    • 配置和管理简单直观，适合大多数用户。
    • 提供的命令工具集广泛，涵盖从包安装、版本管理、发布等各个方面。

  2. pnpm：

    • 提供的命令和 npm 类似，但有一些独特的命令和选项，优化了与符号链接和缓存相关的操作。
    • 可能需要一些学习成本，但对于大中型项目和需要高效包管理的场景非常有用。

总结

  • npm 是一个成熟、广泛使用的包管理工具，适合大多数开发者和项目。
  • pnpm 则提供了一种更高效的包管理方式，特别适合大型项目和需要优化磁盘空间和安装时间的场景。

具体选择哪一个工具，取决于你的项目需求和个人偏好。很多开发者在尝试 pnpm 之后，发现它在性能和资源利用率方面的优势，选择在新项目中使用 pnpm。

范例：winodws如何安装pnpm 9.0.4 ？（已解决）

在 Windows 上安装特定版本的 pnpm（例如 9.0.4）可以通过 npm 来完成。以下是安装步骤：

  1. 确保已安装 Node.js 和 npm： 在安装 pnpm 之前，你需要确保已经安装了 Node.js，因为 npm（Node Package Manager）是随 Node.js 一起安装的。你可以从 Node.js 官网下载并安装 Node.js：https://nodejs.org/

  2. 安装 pnpm： 打开命令提示符（CMD）或 PowerShell，并运行以下命令来安装特定版本的 pnpm：

    1npm install -g pnpm@9.0.4
2
3npm install -g pnpm@8.12.0
4
5npm install -g pnpm@10.7.1

    这条命令会全局安装 pnpm 的 9.0.4 版本。-g 标志表示全局安装，这样你就可以在系统的任何位置使用 pnpm 命令。

  3. 验证安装： 安装完成后，你可以通过运行以下命令来验证 pnpm 是否安装成功以及是否安装了正确的版本：

    1pnpm --version
2
3[root@docusaurus-wiki ~]#pnpm --version
48.12.0

    这将显示已安装的 pnpm 版本号。

如果你遇到任何问题，比如网络问题或者权限问题，你可能需要检查你的网络连接或者以管理员身份运行命令提示符或 PowerShell。如果 npm 安装 pnpm 时遇到证书问题，你可以尝试切换到官方的 npm 镜像源，或者检查你的系统时间是否正确。

如果上述步骤无法解决问题，你可以尝试手动下载 pnpm 的二进制文件并安装，但这通常不是首选方法，因为使用 npm 安装是最简单和推荐的方式。

范例：pnpm运行项目（已解决）

1git clone https://github.com/kuizuo/blog.git
2cd blog
3pnpm install #安装依赖包
4pnpm start #启动服务
5pnpm build #构建

范例：npm和pnpm配置国内源（已解决）

是的，npm 和 pnpm 配置国内镜像源的方法相似，因为它们都支持通过配置文件或命令行参数来设置自定义源。国内源，如淘宝 NPM 镜像（https://registry.npmmirror.com/），可以提供更快的访问速度。

1.查看当前配置的源

1[root@nuc-frpc ~]# npm config get registry
2https://mirrors.huaweicloud.com/repository/npm/
3[root@nuc-frpc ~]# pnpm config get registry
4https://mirrors.huaweicloud.com/repository/npm/

2.设置国内源

永久设置指定源

对于 npm，你可以执行以下命令来设置华为镜像为默认源：

1npm config set registry https://mirrors.huaweicloud.com/repository/npm/

对于 pnpm，你可以做类似的设置：

1pnpm config set registry https://mirrors.huaweicloud.com/repository/npm/

临时指定源

或者，你也可以临时在安装时指定源：

对于 npm：

1npm install some-package --registry=https://mirrors.huaweicloud.com/repository/npm/

对于 pnpm：

1pnpm add some-package --registry=https://mirrors.huaweicloud.com/repository/npm/

另外，对于 pnpm，如果你想持久化配置文件中的设置，你可以编辑 ~/.npmrc 或 ~/.pnpmrc 文件（取决于你使用的管理工具），在文件中添加：

1registry=https://registry.npmmirror.com/

通过上述方法，不管是用 npm 还是 pnpm，你都可以配置为使用国内镜像源，从而加速包的下载。

3.回退为官方源

1npm config set registry https://registry.npmjs.org/
2
3pnpm config set registry https://registry.npmjs.org/

4.其他常见国内npm源

  1. 淘宝 npm 镜像：

  2. 腾讯云 npm 镜像：

  3. 华为云 npm 镜像：

    • 地址：https://mirrors.huaweicloud.com/repository/npm/ 截止2024年7月16日，可用

案例：是否加-D的区别

在 npm 中，npm install vuepress-plugin-ribbon -D 和 npm install vuepress-plugin-ribbon 的主要区别在于依赖项的保存位置和用途。以下是详细解释：

1. npm install vuepress-plugin-ribbon -D

  • 作用： 将 vuepress-plugin-ribbon 安装为开发依赖（devDependencies）。

  • 保存位置： 依赖信息会写入 package.json 文件的 devDependencies 字段。

  • 适用场景：

    • 该插件仅在开发环境中使用（例如构建、测试、调试等）。
    • 在生产环境中不需要该插件。

  • 示例：

    1"devDependencies": {
2  "vuepress-plugin-ribbon": "^1.0.0"
3}

2. npm install vuepress-plugin-ribbon

  • 作用： 将 vuepress-plugin-ribbon 安装为生产依赖（dependencies）。

  • 保存位置： 依赖信息会写入 package.json 文件的 dependencies 字段。

  • 适用场景：

    • 该插件在开发和生产环境中都需要使用。
    • 例如，插件功能直接影响最终用户的使用体验。

  • 示例：

    1"dependencies": {
2  "vuepress-plugin-ribbon": "^1.0.0"
3}

3. 如何选择？

  • 开发依赖（-D）：
    • 如果插件仅用于开发环境（例如构建工具、测试框架、代码格式化工具等），使用 -D。
    • 这样可以减少生产环境的依赖体积。
  • 生产依赖（默认）：
    • 如果插件在运行时需要（例如 UI 组件、功能插件等），直接安装，无需 -D。

4. 其他相关命令

  • 查看依赖：

    • 开发依赖：npm list --dev
    • 生产依赖：npm list --prod

  • 移动依赖：

    • 将开发依赖移动到生产依赖：

      1npm uninstall vuepress-plugin-ribbon -D
2npm install vuepress-plugin-ribbon

    • 将生产依赖移动到开发依赖：

      1npm uninstall vuepress-plugin-ribbon
2npm install vuepress-plugin-ribbon -D

5. 总结

命令依赖类型适用场景
npm install vuepress-plugin-ribbon -D开发依赖仅在开发环境中使用的插件
npm install vuepress-plugin-ribbon生产依赖在开发和生产环境中都需要的插件
根据插件的实际用途选择合适的安装方式，可以有效管理项目的依赖结构。

案例：

1pnpm add -D vitepress-markdown-timeline -w 含义及用法？

pnpm add -D vitepress-markdown-timeline -w 是一个使用 pnpm（高性能 Node.js 包管理器）安装开发依赖的命令，专为 monorepo 项目设计。以下是详细解析：

命令分解

部分含义
pnpm add安装一个 npm 包（类似 npm install 或 yarn add）
-D将包添加到 devDependencies（开发依赖，仅在开发阶段需要）
vitepress-markdown-timeline要安装的包名（一个用于 VitePress 的 Markdown 时间线插件）
-w--workspace-root 的缩写，表示将包安装到 monorepo 根目录

核心作用

  1. 作为开发依赖安装

    • 包会被写入 package.json 的 devDependencies 中，适用于构建工具、插件等非生产环境依赖。

    • 示例：

      1"devDependencies": {
2  "vitepress-markdown-timeline": "^1.0.0"
3}

  2. Monorepo 场景下的 -w 参数

    • 在 monorepo（多包仓库）中，默认会将依赖安装到当前子包的 node_modules。
    • -w 强制将依赖安装到 根目录的 node_modules，确保所有子包共享同一依赖版本，避免重复安装和冲突。

典型使用场景

1. 为 VitePress 项目添加插件

假设你的 monorepo 结构如下：

1my-monorepo/
2├── packages/
3│   ├── docs/       # VitePress 项目
4│   └── utils/      # 工具包
5├── package.json    # 根目录
6└── pnpm-workspace.yaml

运行命令后：

  • vitepress-markdown-timeline 会被安装到根目录的 node_modules。
  • 所有子包（如 docs）均可直接使用该插件，无需单独安装。

2. 避免版本冲突

如果多个子包需要同一插件，用 -w 集中管理可防止版本不一致问题。

常见问题与技巧

1. 何时不用 -w？

  • 如果某个依赖仅限特定子包使用，应切换到子包目录后安装（不加 -w）：

    1cd packages/docs
2pnpm add -D some-plugin

2. 与 -r 参数的区别

  • -w：安装到根目录。
  • -r（--recursive）：在所有子包中安装同一依赖（每个子包独立管理）。
  • 根据项目需求选择：共享用 -w，独立用 -r。

3. 删除依赖

1pnpm remove -w vitepress-markdown-timeline

验证安装成功

  1. 检查根目录 package.json 的 devDependencies。

  2. 在代码中直接引入插件（无需路径）：

    1// 示例：在 VitePress 配置中使用
2import timeline from 'vitepress-markdown-timeline';

总结

  • 适用场景：monorepo 中需要全局共享的开发依赖（如 VitePress 插件、ESLint 配置等）。
  • 优势：节省空间、统一版本、提升安装效率。
  • 注意：非 monorepo 项目无需使用 -w。

遇到其他问题可提供更多上下文（如项目结构或报错信息），我会进一步协助！

📡
👤 作者: One
🔗 链接: https://onedayxyy.cn/frontend/qt666
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 One Blog！
最新文章