当前位置: 首页 > news >正文

npm run dev npm run build

这两个命令本身并不是 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困难,代码被混淆和压缩
使用场景日常编码、调试、测试新功能时项目开发完成,准备上线部署时

简而言之,你在开发过程中会一直使用 npm run dev,而只有当你准备将网站发布上线时,才会运行一次 npm run build,然后将生成的 dist 文件夹上传到你的服务器。

http://www.dtcms.com/a/318410.html

相关文章:

  • Activiti7 调用子流程的配置和处理
  • 【Day 17】Linux-SSH远程连接
  • TMS320F2837xD的CLA加速器开发手册
  • mobaxterm怎么复制全局内容
  • ABP VNext + SQL Server Temporal Tables:审计与时序数据管理
  • 串口通信 day48
  • 华清远见25072班C语言学习day3
  • EXCEL-业绩、目标、达成、同比、环比一图呈现
  • Etcd,真的需要集群部署吗?
  • 消防通道占用识别误报率↓79%!陌讯动态融合算法实战优化
  • 模 板 方 法 模 式
  • 人大金仓数据库逻辑备份与恢复命令
  • PostgreSQL报错“maximum number of prepared transactions reached”原因及高效解决方案解析
  • 百货零售行业数字化蓝图整体规划方案(165页PPT)满分可编辑PPT
  • 构建语义搜索引擎:Weaviate的实践与探索
  • XXL-JOB快速入门
  • cygwin+php教程(swoole扩展+redis扩展)
  • 【完整源码+数据集+部署教程】爬行动物异常检测系统源码和数据集:改进yolo11-GhostDynamicConv
  • 一个php 连sqlserver 目标计算机积极拒绝,无法连接问题的解决
  • 第三节 YOLOv5数据集构成
  • 集成显卡 vs 独立显卡:如何通过设备管理器识别你的GPU?
  • Docker 常用命令介绍
  • 【docker】完整 Dockerfile 示例和构建运行指南
  • 飞浆 paddleocr 识别图片上文字的角度
  • 学习 Android(十四)NDK基础
  • OpenWebUI通过pipeline对接dify的workflow
  • 滑动窗口相关题目
  • VirtualBox 搭建 Linux 虚拟机全流程:Nginx 学习环境前置配置指南
  • ##Anolis OS 8.10 安装oracle19c
  • 广州汽车配件3d打印模型加工厂家-中科米堆CASAIM