从 npm run dev 说起

注：以下讨论是以 windows 环境为例，其他环境也是类似的流程

正文

在我们写前端程序的时候经常执行这样的命令npm run dev, 那这背后的原理是什么呢？
这里涉及到package.json文件的 scripts 字段，比如下面的例子

"scripts": {
  "dev": "vuepress dev docs",
}

参考 npm 的文档，npm run dev 就相当于 node_modules\.bin\vuepress.cmd dev docs

node_modules\.bin\vuepress.cmd 是一个 windows 下的可以直接运行的批处理程序，内容如下：

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\vuepress\vuepress.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\vuepress\vuepress.js" %*
)

其作用就是使用 node 来运行 node_modules\vuepress\vuepress.js 用命令来表示就是

node node_modules\vuepress\vuepress.js dev docs

总结

1.当我们一个项目，它的 package.json文件的 scripts 字段，比如下面的例子

"scripts": {
  "dev": "vuepress dev docs",
}

2.当我们运行npm run dev的时候，其实相当于运行了

node node_modules\vuepress\vuepress.js dev docs

为什么会是 node_modules\vuepress\vuepress.js 这是因为 vuepress 包的 package.json 有如下的内容：

"bin": {
  "vuepress": "vuepress.js"
}

这表示了这个包会提供一个vuepress命令程序，这个程序实际执行的是 vuepress\vuepress.js 文件

参考

1. https://www.npmjs.com.cn/cli/...
2. http://steve-jansen.github.io...