前端入门

"prod": "vite build --mode=production",  // 参考 https://cn.vite.dev/guide/env-and-mode.html#modes 加载,//调用.env.production

工具链 | Vue.js 

 

 

npm、pnpm、yarn 和 bun 是 JavaScript 生态中常用的包管理工具，它们的核心功能都是安装、管理和分享依赖，但在实现机制、性能、特性和适用场景上存在显著差异。以下是详细对比：

1. 基本信息

工具	发布时间	开发者	设计目标
npm	2010 年	Node.js 官方	作为 Node.js 的默认包管理器，最初解决 CommonJS 模块的依赖管理问题。
yarn	2016 年	Facebook	针对 npm v2 的性能和确定性问题推出，强调速度和一致性（yarn.lock）。
pnpm	2016 年	Zoltan Kochan	通过硬链接和符号链接实现磁盘空间高效利用，解决依赖重复安装问题。
bun	2023 年	Jarred Sumner	全栈 JavaScript 运行时，集成包管理、打包和运行功能，追求极致性能。

2. 依赖管理机制

npm/yarn（经典模式）

• 扁平化安装：将依赖平铺到 node_modules 中，通过覆盖解决版本冲突。
  • 问题：依赖结构不清晰，容易导致 node_modules 庞大（"嵌套地狱"），磁盘空间浪费严重。

pnpm

• 内容寻址存储（CAS）：
  1. 将依赖安装到全局存储（~/.pnpm-store）。
  2. 通过硬链接和符号链接复用相同版本的依赖，节省磁盘空间。
  • 优势：磁盘空间占用减少 70% 以上，安装速度快，依赖结构严格遵循 package.json。

bun

• 混合机制：类似 pnpm 的存储方式，但集成在 Bun 运行时中，性能更优。

3. 性能对比

工具	安装速度	磁盘空间占用	冷缓存性能
npm	较慢	高	慢
yarn	快	高	中
pnpm	最快	极低	快
bun	极快	低	极快

关键差异点：

• pnpm：依赖复用率高，磁盘操作少。
• bun：使用 Rust 编写，并行下载和安装，性能最优。

4. 特性对比

特性	npm	yarn	pnpm	bun
锁定文件	package-lock.json	yarn.lock	pnpm-lock.yaml	bun.lockb (二进制)
工作空间	支持 (v7+)	原生支持	原生支持	原生支持
离线模式	有限支持 (npm ci)	完全支持	完全支持	完全支持
并行安装	部分支持	完全支持	完全支持	完全支持
依赖分析	npm ls	yarn why	pnpm why	bun install --graph
脚本运行	基础支持	增强版 (yarn run)	增强版 (pnpm exec)	内置支持 (bun run)
包发布	支持	支持	支持	支持
生态兼容性	100%	99%	99%	95% (新工具，持续完善)

5. 适用场景

npm

• 适合初学者或简单项目。
• 无需复杂特性，依赖结构简单。

yarn

• 需要快速安装和确定性依赖的项目。
• 大型 monorepo（工作空间功能）。
• 依赖复杂嵌套结构的 legacy 项目。

pnpm

• 磁盘空间敏感的场景（如 CI/CD 环境）。
• 大型项目（依赖多，重复安装问题严重）。
• monorepo（工作空间 + 高效依赖管理）。

bun

• 性能优先的场景（如开发工具链、脚本执行）。
• 全栈项目（集成运行时、打包和测试）。
• 追求新技术的团队（需接受一定的兼容性风险）。

6. 命令对比

功能	npm	yarn	pnpm	bun
安装所有依赖	npm install	yarn	pnpm install	bun install
安装单个依赖	npm install <pkg>	yarn add <pkg>	pnpm add <pkg>	bun add <pkg>
安装开发依赖	npm install -D <pkg>	yarn add -D <pkg>	pnpm add -D <pkg>	bun add -d <pkg>
移除依赖	npm uninstall <pkg>	yarn remove <pkg>	pnpm remove <pkg>	bun remove <pkg>
运行脚本	npm run <script>	yarn <script>	pnpm <script>	bun run <script>
初始化项目	npm init	yarn init	pnpm init	bun init
检查依赖更新	npm outdated	yarn outdated	pnpm outdated	bun update

7. 总结与建议

项目类型	推荐工具	理由
小型项目 / 学习	npm	简单易用，无需额外配置。
中大型项目	pnpm	节省磁盘空间，安装速度快，依赖结构清晰。
性能敏感项目	bun	极致性能，全栈功能集成。
大型 monorepo	pnpm / yarn	工作空间支持，高效依赖管理。
兼容性要求高的项目	npm / yarn	生态成熟，兼容性问题少。

8. 选择工具时的关键考虑因素

1. 磁盘空间：pnpm 和 bun 在这方面表现最优。
2. 安装速度：bun > pnpm > yarn > npm。
3. monorepo 支持：yarn 和 pnpm 提供更完善的工作空间功能。
4. 生态兼容性：npm 和 yarn 几乎 100% 兼容所有包，bun 需注意新工具的潜在兼容性问题。
5. 团队熟悉度：避免引入学习成本过高的工具。

建议根据项目规模、性能需求和团队偏好选择合适的工具，多数情况下，pnpm 是平衡性能和兼容性的最佳选择。

Bun — A fast all-in-one JavaScript runtime

在 Deno 中，依赖管理与 npm 有显著差异，因为 Deno 不需要传统的 package.json 或 node_modules 目录。以下是 Deno 与 npm 在依赖管理上的核心区别：

1. Deno 的依赖管理方式

Deno 直接通过 URL 或 本地路径 引入模块，无需安装依赖：

typescript

 

 

 

 

 

// 直接从 URL 导入
import { serve } from "https://deno.land/std@0.192.0/http/server.ts";

// 或从本地文件导入
import { sum } from "./utils/math.ts";

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

依赖会被缓存到本地（默认位置：$DENO_DIR/deps），但不需要显式安装命令。

2. 等效命令对比

功能	npm 命令	Deno 等效操作
安装依赖	npm install	无需命令（自动缓存）
添加新依赖	npm add <package>	直接在代码中导入 URL 即可
指定版本	npm add <package>@<version>	在 URL 中指定版本（如 @0.192.0）
开发依赖	npm add --save-dev <package>	无特殊区分（依赖按需导入）
运行脚本	npm run <script>	deno run <script.ts>
检查依赖更新	npm outdated	deno info --lock-write
锁定依赖版本	package-lock.json	deno.lock 文件（自动生成）

3. Deno 的依赖管理工具

虽然 Deno 不需要 npm install 或 npm add，但提供了以下工具：

deno cache

预缓存依赖（可选）：

bash

 

 

 

 

 

deno cache main.ts  # 缓存 main.ts 及其所有依赖

 

deno install

安装可执行脚本（类似 npm install -g）：

bash

 

 

 

 

 

deno install --allow-net https://deno.land/x/denon@2.8.0/denon.ts

 

deno.lock 文件

类似 package-lock.json，锁定依赖版本：

bash

 

 

 

 

 

deno run --lock=deno.lock --lock-write main.ts  # 生成或更新 lock 文件

 

4. 示例：添加依赖对比

npm (Node.js)

1. 安装依赖：
   bash

    

    

    

    

    

   npm add axios

    
2. 在代码中使用：
   javascript

    

    

    

    

    

   const axios = require("axios");

    

Deno

1. 直接在代码中导入：
   typescript

    

    

    

    

    

   import axios from "https://deno.land/x/axios@v1.4.0/mod.ts";

    
2. 运行时自动缓存：
   bash

    

    

    

    

    

   deno run --allow-net main.ts

    

5. 关键差异总结

特性	npm (Node.js)	Deno
依赖声明方式	package.json	直接在代码中导入 URL
安装命令	npm install	无需安装（自动缓存）
版本管理	语义化版本（如 ^1.0.0）	URL 中的显式版本（如 @v1.4.0）
依赖缓存位置	node_modules	$DENO_DIR/deps
锁定文件	package-lock.json	deno.lock
全局安装	npm install -g	deno install

总结

• Deno 简化了依赖管理，无需 npm install 或 npm add，直接通过 URL 导入模块，依赖自动缓存。
• npm 需要通过 package.json 声明依赖，并使用 npm install/add 管理依赖树。

Vite Plugin | Vue DevTools