前端-npm和yarn的安装以及区别

发布于:2025-08-30 ⋅ 阅读:(16) ⋅ 点赞:(0)

目录

一.安装npm或yarn

        安装Yarn

        🖥️ macOS / Linux

                方式 1:通过 npm 安装(最简单)

                方式 2:通过系统包管理器

        🪟 Windows

                方法 1:用 npm 安装

                方法 2:用 MSI 安装包

                方法 3:用 Chocolatey

         ✅ 验证安装

二.切换为国内源:

        npm切换为国内源:

                1. 临时使用国内源

                2. 永久切换为国内源

                3. 使用 cnpm(淘宝团队维护的 npm CLI)

                4. 切换回官方源

                ✅ 总结

        Yarn切换为国内源:

                ✅ 一键切换为淘宝(npmmirror)源

                🧠 小知识:淘宝源(npmmirror)说明

                ⛔ 如何切回官方源

                🔎 Yarn 镜像对照表(速查)

                💡 Bonus:临时使用源(不影响全局配置)

三. 速度和性能

四. 锁文件

五. 命令差异

六. 确定性与一致性

七. 工作区 (Workspaces)

八. 社区与生态

九. 总结


一.安装npm或yarn

  • npm:随 Node.js 一起安装,自带。

  • Yarn:需要单独安装(用 npm 或下载安装包)。

        安装Yarn

        🖥️ macOS / Linux

                方式 1:通过 npm 安装(最简单)
npm install -g yarn

                安装完成后,检查版本:

yarn -v
                方式 2:通过系统包管理器

                        macOS(Homebrew)

brew install yarn

                        Ubuntu / Debian

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn

        🪟 Windows

                方法 1:用 npm 安装

                        如果你已经有 Node.js 和 npm:

npm install -g yarn
                方法 2:用 MSI 安装包

                        打开 Yarn 官方安装器下载页面:
                        👉 Yarn MSI 安装包

                        下载并运行 .msi 安装文件。

                方法 3:用 Chocolatey

                        如果装了 Chocolatey:

choco install yarn

         ✅ 验证安装

                无论哪种方式,安装完成后都运行:

yarn -v

                如果能看到版本号,说明安装成功。


二.切换为国内源:

        当我们安装好yarn或者npm后如果之间使用其中一个安装项目依赖或进行其它操作的时候,因为此时配置文件中的源连接还是国外的,所以是有极大概率请求失败的。

        所以需要我们切换为国内源。


        npm切换为国内源:

                1. 临时使用国内源

                        只针对单次安装使用国内源,不会改变全局配置:

npm install 包名 --registry=https://registry.npmmirror.com

                2. 永久切换为国内源

                        执行命令修改 npm 的配置:

npm config set registry https://registry.npmmirror.com

                        验证是否生效:

npm config get registry

                        如果返回的是:

https://registry.npmmirror.com/

                        说明切换成功 ✅

                3. 使用 cnpm(淘宝团队维护的 npm CLI)

                        你也可以安装一个专门的 cnpm 工具,它会默认使用淘宝镜像:

npm install -g cnpm --registry=https://registry.npmmirror.com

                        之后用 cnpm install 来代替 npm install,下载速度会更快。

                4. 切换回官方源

                        如果以后需要切换回 npm 官方源,可以运行:

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

                ✅ 总结

                        临时切换:npm install 包名 --registry=...

                        永久切换:npm config set registry ...

                        推荐源:https://registry.npmmirror.com

                        验证:npm config get registry


        Yarn切换为国内源:

                要将 Yarn 切换为国内镜像源(比如淘宝镜像),可以通过修改 Yarn 的配置来实现,这样安装依赖会更快、更稳定。

                ✅ 一键切换为淘宝(npmmirror)源

yarn config set registry https://registry.npmmirror.com

                然后你可以验证一下是否设置成功:

yarn config get registry

                输出应该是:

https://registry.npmmirror.com

                🧠 小知识:淘宝源(npmmirror)说明

                        淘宝源现在已迁移为 npmmirror.com,由阿里维护,是 npm 的完整镜像,可以稳定高速访问 npm 上的所有包。

                ⛔ 如何切回官方源

                        如果以后想还原成默认官方源(npmjs),执行:

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

                🔎 Yarn 镜像对照表(速查)

用途 官方源 淘宝源(npmmirror)
Yarn 默认 registry https://registry.yarnpkg.com https://registry.npmmirror.com
npm 默认 registry https://registry.npmjs.org https://registry.npmmirror.com

                💡 Bonus:临时使用源(不影响全局配置)

yarn add axios --registry=https://registry.npmmirror.com

三. 速度和性能

  • Yarn(最初优势)

    • 使用 并行安装,速度比早期的 npm 快很多。

    • 通过 缓存机制(离线模式)加速再次安装。

  • npm(后来追上)

    • 从 npm v5 开始引入 package-lock.json,也支持并行安装,速度已接近 Yarn。


四. 锁文件

  • npm:生成 package-lock.json

  • Yarn:生成 yarn.lock
    🔑 都是用来锁定依赖版本,确保团队环境一致。


五. 命令差异

虽然大多数命令相似,但有些区别:

功能 npm 命令 yarn 命令
安装依赖 npm install yarn install
安装包 npm install axios yarn add axios
安装开发依赖 npm install axios -D yarn add axios --dev
删除包 npm uninstall axios yarn remove axios
全局安装 npm install -g xxx yarn global add xxx
运行脚本 npm run serve yarn serve

👉 Yarn 少了 run,更简洁。


六. 确定性与一致性

  • Yarn:设计之初就强调“确定性安装”,确保任何机器、任何环境安装的依赖结果完全一致。

  • npm:后来通过 package-lock.json 才做到类似的效果。


七. 工作区 (Workspaces)

  • Yarn:内置支持 Monorepo(多包项目) 管理。

  • npm:npm v7 才开始支持 Workspaces,但生态还不如 Yarn 稳定。


八. 社区与生态

  • npm:历史更悠久,用户基数更大,社区生态成熟。

  • Yarn:Facebook 推出,Vue、React 等大项目曾推荐使用,但后来很多团队也回归 npm。


九. 总结

  • 如果是 新手 / 小项目:npm 完全够用,不用额外装 Yarn。

  • 如果是 大项目 / Monorepo 管理:Yarn(特别是 Yarn v2/v3)更好。

  • 两者安装的包都来自 npm registry,兼容性没问题。


👉 一句话总结:
npm 是默认的,Yarn 是优化过的选择。随着 npm 的更新,它们的差距已经没那么大了。


网站公告

今日签到

点亮在社区的每一天
去签到