npm run dev & npm run build

yourkin666

于 2025-08-06 14:55:43 发布

阅读量514

点赞数 6

CC 4.0 BY-SA版权

文章标签： npm 前端 node.js

本文链接：https://blog.csdn.net/2302_80742310/article/details/149971978

这两个命令本身并不是 NPM (Node Package Manager) 内置的，而是开发者在项目的 package.json 文件中自定义的 脚本命令（scripts）。它们是行业内广泛使用的 约定俗成 的名称。

核心概念：package.json 中的 scripts

要理解这两个命令，首先要看项目的根目录下的 package.json 文件。里面会有一个 scripts 字段

      // package.json 示例
{
  "name": "my-awesome-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "lint": "eslint ."
  },
  "dependencies": {
    // ...
  },
  "devDependencies": {
    "vite": "^4.0.0",
    "eslint": "^8.0.0"
    // ...
  }
}

当你运行 npm run <脚本名> 时，NPM 会查找 scripts 对象中对应的键（比如 dev），然后执行其对应的值（比如 vite 这个命令）。

所以，npm run dev 和 npm run build 的具体行为，完全取决于 scripts 中为它们定义的命令。不过，根据约定，它们的功能通常如下：

npm run dev (用于开发环境)

这个命令的目的是 启动一个本地开发服务器，为开发者提供一个高效、便捷的编码环境。

通俗地说： 这是给开发者自己用的。它就像一个厨师在自己的厨房里做菜，可以随时尝味道、加调料、调整火候，并且立刻看到效果。

npm run build (用于生产环境)

这个命令的目的是 将你的项目代码打包成最终的、可部署的静态文件。

通俗地说： 这是为最终用户准备的。就像厨师把做好的菜品精心打包，做成一份份标准化的外卖，方便配送和顾客食用。这份“外卖”要尽可能小、加载快。

总结对比

特性/方面	npm run dev (开发模式)	npm run build (生产模式)
目标用户	开发者	最终用户
核心目的	提升开发效率和体验	提升应用性能和加载速度
服务器	启动一个带热更新的本地开发服务器	不启动服务器，只生成文件
输出结果	通常在内存中，不生成永久文件	在 dist 或 build 文件夹中生成静态文件
构建速度	快，牺牲优化换取速度	慢，进行大量优化操作
代码体积	大，包含调试信息	小，经过压缩和优化
调试	容易，有 Source Maps	困难，代码被混淆和压缩
使用场景	日常编码、调试、测试新功能时	项目开发完成，准备上线部署时