Skip to content

npm和pnpm

npm和pnpm

目录

[toc]

npm常用命令

bash
npm install <moduleName> -g   包安装到全局
npm list:查看当前已安装的包。
npm config set registry https://mirrors.huaweicloud.com/repository/npm/   #设置淘宝源
npm config set cache  "/opt/npmcache/"   #设置缓存路径

#构建项目
npm install && npm run build

#更新依赖
运行 `npm update` `yarn upgrade` 来更新你的依赖

pnpm常用命令

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

常用命令

bash
#启动服务
pnpm install && pnpm run dev

#构建输出dist
pnpm build


#查看 默认的pnpm源
pnpm config get registry 
#配置pnpm的源为华为源
pnpm config set registry https://mirrors.huaweicloud.com/repository/npm/
#切换回官方源
pnpm config set registry https://registry.npmjs.org/ 


#pnpm卸载/安装包
pnpm uninstall husky
pnpm install husky

安装和管理依赖

  1. 安装所有依赖项

    bash
    pnpm install
  2. 安装一个包

    bash
    pnpm add <package-name>
  3. 安装一个包作为开发依赖

    bash
    pnpm add <package-name> --save-dev
  4. 全局安装一个包

    bash
    pnpm add <package-name> --global
  5. 移除一个包

    bash
    pnpm remove <package-name>
  6. 更新所有依赖项

    bash
    pnpm update
  7. 更新一个包

    bash
    pnpm update <package-name>

运行脚本

  1. 运行项目中的脚本

    bash
    pnpm run <script-name>
  2. 运行测试脚本

    bash
    pnpm test
  3. 运行开发服务器

    bash
    pnpm start

管理项目

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

    bash
    pnpm init
  2. 查看已安装的包及其依赖关系

    bash
    pnpm list
  3. 查看全局安装的包

    bash
    pnpm list --global
  4. 查看包的详细信息

    bash
    pnpm view <package-name>

缓存和存储

  1. 清理缓存

    bash
    pnpm store prune
  2. 查看存储路径

    bash
    pnpm store path

其他

  1. 查看 pnpm 版本

    bash
    pnpm --version
  2. 获取帮助

    bash
    pnpm help

问题:npm和pnpm有啥区别?

npmpnpmJavaScript 包管理工具,但它们在一些关键方面存在差异。以下是它们的主要区别:

安装方式和速度

  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

    bash
    npm install -g pnpm@9.0.4
    
    npm install -g pnpm@8.12.0

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

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

    bash
    pnpm --version
    
    [root@docusaurus-wiki ~]#pnpm --version
    8.12.0

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

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

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

范例:pnpm运行项目(已解决)

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

范例:npm和pnpm配置国内源(已解决)

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

1.查看当前配置的源

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

2.设置国内源

永久设置指定源

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

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

对于 pnpm,你可以做类似的设置:

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

临时指定源

或者,你也可以临时在安装时指定源:

对于 npm

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

对于 pnpm

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

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

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

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

3.回退为官方源

bash
npm config set registry https://registry.npmjs.org/

pnpm config set registry https://registry.npmjs.org/

4.其他常见国内npm源

  1. 淘宝 npm 镜像

  2. 腾讯云 npm 镜像

  3. 华为云 npm 镜像

案例:是否加-D的区别

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

1. npm install vuepress-plugin-ribbon -D

  • 作用: 将 vuepress-plugin-ribbon 安装为开发依赖(devDependencies)。

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

  • 适用场景

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

    json
    "devDependencies": {
      "vuepress-plugin-ribbon": "^1.0.0"
    }

2. npm install vuepress-plugin-ribbon

  • 作用: 将 vuepress-plugin-ribbon 安装为生产依赖(dependencies)。

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

  • 适用场景

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

    json
    "dependencies": {
      "vuepress-plugin-ribbon": "^1.0.0"
    }

3. 如何选择?

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

4. 其他相关命令

  • 查看依赖

    • 开发依赖:npm list --dev
    • 生产依赖:npm list --prod
  • 移动依赖

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

      bash
      npm uninstall vuepress-plugin-ribbon -D
      npm install vuepress-plugin-ribbon
    • 将生产依赖移动到开发依赖:

      bash
      npm uninstall vuepress-plugin-ribbon
      npm install vuepress-plugin-ribbon -D

5. 总结

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

案例:

bash
pnpm add -D vitepress-markdown-timeline -w 含义及用法?

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


命令分解

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

核心作用

  1. 作为开发依赖安装

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

    • 示例:

      json
      "devDependencies": {
        "vitepress-markdown-timeline": "^1.0.0"
      }
  2. Monorepo 场景下的 -w 参数

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

典型使用场景

1. 为 VitePress 项目添加插件

假设你的 monorepo 结构如下:

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

运行命令后:

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

2. 避免版本冲突

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


常见问题与技巧

1. 何时不用 -w

  • 如果某个依赖仅限特定子包使用,应切换到子包目录后安装(不加 -w):

    bash
    cd packages/docs
    pnpm add -D some-plugin

2. -r 参数的区别

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

3. 删除依赖

bash
pnpm remove -w vitepress-markdown-timeline

验证安装成功

  1. 检查根目录 package.jsondevDependencies

  2. 在代码中直接引入插件(无需路径):

    js
    // 示例:在 VitePress 配置中使用
    import timeline from 'vitepress-markdown-timeline';

总结

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

遇到其他问题可提供更多上下文(如项目结构或报错信息),我会进一步协助!

最近更新