npm run dev 的作用

npm run dev 的作用是:执行你在 package.json 中自定义的名为 dev 的脚本命令
换句话说,npm 本身并不知道 “dev” 该干什么,它只是去 package.json 的 "scripts" 字段里找到 "dev" 对应的命令并帮你运行。


举个例子

假设你的 package.json 里有:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

执行 npm run dev 时,npm 会启动 Vite 的开发服务器,通常会:

  • 监听源代码变化(热更新 HMR)
  • 启动本地服务(如 http://localhost:5173)
  • 开启调试模式,方便你边改边看效果

🛠 常见框架的 "dev" 脚本

框架常见 dev 脚本效果
Vite"vite"启动本地开发服务器,支持热更新
Webpack"webpack serve"启动 webpack-dev-server
Next.js"next dev"启动 Next.js 开发服务器
Nuxt"nuxt dev"启动 Nuxt 开发服务器
Node.js (原生)"nodemon src/index.js"用 nodemon 监听文件变化并重启服务

注意事项

  • 必须先 npm install 安装依赖,否则脚本里用到的命令(如 vitenext)会找不到。
  • npm run dev 通常是开发阶段使用,构建生产包一般用 npm run build

一句话总结

npm run dev 不是 npm 的固定功能,而是执行你在 package.json 里写的自定义开发脚本,通常用来启动本地开发服务器并开启热更新。

### 含义 - **npm run**:`npm` 是 Node.js 的包管理器,允许安装、更新、删除和管理 Node.js 的模块和应用程序;`run` 是 `npm` 的一个子命令,用于执行在 `package.json` 文件的 `scripts` 部分定义的脚本。它本身不是完整的命令,需要搭配具体的脚本名称使用[^2]。 - **npm run dev**:`dev` 是在 `package.json` 文件中 `scripts` 部分定义的一个脚本命令的名称。通常,这个名称是开发环境的简写,意味着这个命令通常用于启动开发服务器或进行开发相关的任务。在 Vue.js 项目中,`npm run dev` 实际上可能会执行 `vue-cli-service serve` 这条命令[^2]。 ### 区别 `npm run` 是一个通用的执行 `package.json` 中脚本的指令,需要指定具体的脚本名称才能发挥作用;而 `npm run dev` 是一个具体的执行指令,它对应 `package.json` 里 `scripts` 部分名为 `dev` 的脚本,有特定的功能和用途。例如,在某些项目中,如果 `package.json` 里的 `scripts` 部分定义如下: ```json "scripts": { "dev": "webpack-dev-server --mode development", "serve": "vue-cli-service serve" } ``` 那么 `npm run dev` 会执行 `webpack-dev-server --mode development` 命令来启动开发服务器,而 `npm run serve` 会执行 `vue-cli-service serve` 命令。`npm run` 本身不指定具体任务,`npm run dev` 则明确执行开发相关任务[^2]。 ### 使用场景 - **npm run**:适用于需要执行 `package.json` 中定义的各种脚本的场景。比如,除了开发相关的脚本,还有测试脚本、构建脚本等。如果 `package.json` 中有 `"test": "jest"`,那么可以使用 `npm run test` 来执行测试任务。 - **npm run dev**:主要用于开发环境,启动开发服务器,提供实时的开发体验,方便开发者进行代码编写和调试。在开发过程中,当修改代码时,开发服务器可以自动重新加载页面,提高开发效率。 ```json { "name": "my-project", "version": "1.0.0", "scripts": { "dev": "webpack-dev-server --mode development", "build": "webpack --mode production", "test": "jest" } } ``` 在这个示例中,`npm run dev` 用于开发环境启动服务器,`npm run build` 用于生产环境构建项目,`npm run test` 用于执行测试任务。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值