從 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...