从 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…
    原文作者:杨军军
    原文地址: https://segmentfault.com/a/1190000017008237
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞