跳转至内容
0
  • 主页
  • 版块
  • 最新
  • 标签
  • 热门
  • 主页
  • 版块
  • 最新
  • 标签
  • 热门
折叠
品牌标识
让每一次思考都有价值
  1. 让每一次思考都有价值
  2. 版块
  3. 记录与分享
  4. 详细介绍npm、npx、pnpm、cnpm和yarn

详细介绍npm、npx、pnpm、cnpm和yarn

已定时 已固定 已锁定 已移动 记录与分享
3 评论 2 发布者 8 浏览
  • 从旧到新
  • 从新到旧
  • 最多赞同
评论
  • 在新文章中评论
登录后评论
此文章已被删除。只有拥有文章管理权限的用户可以查看。
  • 小黑小 离线
    小黑小 离线
    小黑
    编写于 最后由 Jinhao 编辑
    #1
    目录
    一、先搞懂:npm、npx、pnpm、cnpm和yarn到底是啥?
    1. npm—— 官方包管理基石
    2. npx—— 临时工具执行器
    3. pnpm—— 节省空间的性能王者
    4. cnpm—— 国内加速镜像
    5. yarn—— 稳定与速度兼顾
    二、核心区别:从使用和原理上看不同
    三、实际应用:我在工作和生活中怎么用它们?
    1. 新项目初始化 —— 选择合适的工具链
    2. 依赖管理与性能优化
    3. 故障排查与版本控制
    四、开发建议:如何选择最适合的工具?

    一、先搞懂:npm、npx、pnpm、cnpm和yarn到底是啥?

    1. npm—— 官方包管理基石

    npm(Node Package Manager)是Node.js官方自带的包管理器,也是前端开发的基础工具。它通过package.json管理依赖版本,支持npm install安装依赖、npm run执行脚本,以及npm publish发布模块。

    • 核心特性:
      • 嵌套依赖结构:早期版本会将依赖层层嵌套在node_modules中,导致磁盘空间占用较大。
      • 版本锁定:通过package-lock.json确保依赖一致性,避免版本漂移。
      • 社区生态:拥有全球最大的JavaScript包仓库,覆盖超过100万个开源模块。
    • 使用示例:
      npm init -y  # 初始化项目
      npm install express  # 安装Express框架
      npm run dev  # 执行自定义脚本
      
    2. npx—— 临时工具执行器

    npx是npm 5.2+内置的工具,用于临时执行npm包中的命令,无需全局安装。

    • 核心特性:
      • 临时环境:将依赖下载到临时目录,执行后自动删除,避免污染全局环境。
      • 版本隔离:可指定特定版本执行,例如npx create-react-app@latest my-app。
      • 安全隔离:通过沙盒机制限制命令权限,降低恶意代码风险。
    • 使用示例:
      npx webpack --config webpack.config.js  # 执行Webpack构建
      npx degit user/repo my-project  # 快速克隆Git仓库模板
      
    3. pnpm—— 节省空间的性能王者

    pnpm(Performant npm)通过“硬链接+内容寻址”技术优化依赖管理,大幅减少磁盘占用。

    • 核心特性:
      • 全局缓存:所有依赖统一存储在.pnpm-store,项目通过软链接引用,避免重复下载。
      • 扁平结构:直接依赖在node_modules根目录,间接依赖通过符号链接访问,解决“幽灵依赖”问题。
      • 速度优势:分阶段安装(依赖解析、结构计算、链接)显著提升安装效率。
    • 使用示例:
      pnpm install  # 安装依赖
      pnpm add -D typescript  # 安装开发依赖
      
    4. cnpm—— 国内加速镜像

    cnpm是淘宝团队维护的npm镜像,每10分钟同步一次官方仓库,解决国内网络慢的问题。

    • 核心特性:
      • 镜像加速:将npm源替换为国内服务器,实测下载速度提升3-10倍。
      • 命令兼容:完全复用npm命令,只需将npm替换为cnpm。
      • 局限性:存在10分钟同步延迟,不建议用于生产环境发布。
    • 使用示例:
      npm install -g cnpm  # 全局安装cnpm
      cnpm install react  # 通过镜像安装React
      
    5. yarn—— 稳定与速度兼顾

    yarn由Facebook开发,旨在解决早期npm的性能和稳定性问题,提供离线模式和并行安装。

    • 核心特性:
      • 并行下载:同时启动多个依赖下载任务,充分利用带宽资源。
      • 离线缓存:将依赖缓存到本地,无网络时仍可安装。
      • 严格锁定:通过yarn.lock确保不同环境依赖一致,避免因版本差异导致的问题。
    • 版本迭代:
      • Yarn Classic(v1):兼容npm生态,支持传统node_modules结构。
      • Yarn Berry(v2+):引入Plug’n’Play(PnP)模式,跳过node_modules,通过.pnp.cjs直接映射依赖,需IDE插件支持。
    • 使用示例:
      yarn init -y  # 初始化项目
      yarn add react  # 安装React
      yarn install --offline  # 离线安装依赖
      

    二、核心区别:从使用和原理上看不同

    维度 npm npx pnpm cnpm yarn
    类型 包管理器 包执行工具 包管理器 镜像加速工具 包管理器
    依赖存储 嵌套结构,重复安装 临时目录,执行后删除 全局缓存+硬链接,共享依赖 本地镜像缓存 本地缓存+并行下载
    速度 较慢(串行安装) 瞬时(依赖已缓存时) 极快(硬链接+内容寻址) 快(国内镜像) 快(并行安装)
    磁盘占用 高(嵌套依赖) 无(临时目录自动清理) 低(共享依赖) 中等(镜像缓存) 中等(缓存复用)
    安全机制 依赖审计(npm audit) 沙盒隔离 严格依赖解析(避免幽灵依赖) 镜像同步延迟风险 校验和验证(确保包完整性)
    适用场景 通用项目、官方生态 临时工具执行、快速原型 大型项目、Monorepo、资源敏感环境 国内开发调试 复杂项目、离线开发、团队协作

    三、实际应用:我在工作和生活中怎么用它们?

    1. 新项目初始化 —— 选择合适的工具链
    • 个人小项目:
      • 推荐pnpm,兼顾速度与空间优化,例如:
        pnpm init -y
        pnpm install vue@3
        
    • 企业级项目:
      • 推荐yarn或npm,结合CI/CD流程确保依赖一致性,例如:
        yarn install  # 团队协作时使用yarn.lock锁定版本
        
    • 国内开发环境:
      • 可配置npm使用淘宝镜像,或直接用cnpm加速:
        npm config set registry https://registry.npmmirror.com
        
    2. 依赖管理与性能优化
    • 磁盘空间不足时:
      • 切换pnpm,例如:
        pnpm install  # 安装后全局缓存共享依赖
        
    • 提升安装速度:
      • 使用yarn的并行安装:
        yarn install  # 并行下载依赖
        
      • 或pnpm的硬链接技术:
        pnpm install  # 直接链接全局缓存中的文件
        
    3. 故障排查与版本控制
    • 依赖冲突:
      • 对比package-lock.json或yarn.lock差异,使用npm ls或yarn why定位问题。
    • 镜像同步延迟:
      • 若cnpm安装的包版本异常,切换回官方源:
        npm config set registry https://registry.npmjs.org
        
    • 严格依赖检查:
      • 使用pnpm时,若工具不兼容符号链接,可切换为扁平模式:
        pnpm config set nodeLinker hoisted
        

    四、开发建议:如何选择最适合的工具?

    1. 新项目首选:

      • 性能优先:pnpm(尤其适合Monorepo)。
      • 团队协作:yarn(确保依赖一致性)。
    2. 国内开发:

      • 配置npm使用淘宝镜像,或临时用cnpm加速,但避免用于生产发布。
    3. 传统项目迁移:

      • 从npm迁移到yarn或pnpm时,需删除node_modules和锁文件,重新初始化。
    4. 临时工具执行:

      • 优先用npx,例如npx prettier --write .格式化代码,无需全局安装Prettier。

    通过理解这些工具的核心差异和适用场景,开发者可以根据项目需求灵活选择,提升开发效率和代码质量。

    1 条评论 最后评论
    0
    • 十二十 离线
      十二十 离线
      十二
      编写于 最后由 编辑
      #2

      小黑哥哥,又水一篇了

      小黑小 1 条评论 最后评论
      0
      • 十二十 十二

        小黑哥哥,又水一篇了

        小黑小 离线
        小黑小 离线
        小黑
        编写于 最后由 编辑
        #3

        @十二 闭嘴,我从我博客复制粘贴的(虽然也是AI处理过的),不算水😶

        1 条评论 最后评论
        0
        评论
        • 在新文章中评论
        登录后评论
        • 从旧到新
        • 从新到旧
        • 最多赞同


        • 登录

        • 没有帐号? 注册

        • 登录或注册以进行搜索。
        • 第一个评论
          最后一个评论