使用vue-cli初始化后運行npm run server到底干了什么

類npm命令

在進行前端開發中，我們會經常使用各種命令行指令，這些指令是如何實現的呢？在cmd命令行中可以使用的命令肯定是有對應的應用程序添加到path路徑里面了，查找path路徑發現nodejs使用的一些指令並沒有找對新增的path值，這些指令是如何來的呢？

安裝nodejs時，為了使用node命令，我們會將nodejs的安裝路徑添加到path路徑中，此時，可以使用node命令了，查看node的路徑，我們可以看到一個npm.bat文件，這個npm.bat文件就是對應的npm命令。

:: Created by npm, please don't edit manually.
@ECHO OFF

SETLOCAL

SET "NODE_EXE=%~dp0\node.exe"
IF NOT EXIST "%NODE_EXE%" (
  SET "NODE_EXE=node"
)

SET "NPM_CLI_JS=%~dp0\node_modules\npm\bin\npm-cli.js"
FOR /F "delims=" %%F IN ('CALL "%NODE_EXE%" "%NPM_CLI_JS%" prefix -g') DO (
  SET "NPM_PREFIX_NPM_CLI_JS=%%F\node_modules\npm\bin\npm-cli.js"
)
IF EXIST "%NPM_PREFIX_NPM_CLI_JS%" (
  SET "NPM_CLI_JS=%NPM_PREFIX_NPM_CLI_JS%"
)

"%NODE_EXE%" "%NPM_CLI_JS%" %*

從上面的代碼可以看出，實際上是使用nodejs運行相關的js文件進行實現的。
一般在path中添加的路徑：

• nodejs的安裝路徑(包括node,npm)
• C:\Users{useraccount}\AppData\Roaming\npm(包括npm,webpack,vue-cli等)

如何進行nodejs的調試

安visual studio,安裝nodejs插件，創建一個nodejs項目，修改工程的屬性，調整相關的啟動信息，此時就可以進行相應的js代碼調試了。可以跟蹤一個命令運行到底運行了一些什么。

npm run命令

通過visual studio進行調試跟蹤，

//閱讀規則：
//xxx.js->(對應的js文件)
//    xxxxxx(當前文件中對應的關鍵的代碼點)
//npm run server(vue-cli創建的項目)
npm-cli.js->
    npm.load()
npm.js->
    Object.defineProperty(npm.commands...
run-script.js->
    function runScript (args, cb) {}(從函數的實現可以看到在該函數中讀取了package.json配置文件)
    run()
chain.js->
    func Loop(){} //可以看到
index.js->
    func lifecycle(){}
    function lifecycle_ (pkg, stage, wd, opts, env, cb){}
    function runPackageLifecycle (pkg, env, wd, opts, cb){}
    function runCmd (note, cmd, pkg, env, stage, wd, opts, cb){}
    function runCmd_{}

通過跟蹤，我們可以發現，npm run xxx實際上最終會轉換為cmd運行相關的命令。最后的結果是：

npm run xxx
xxx是從package.json的script中取出的對應命令。

vue-cli創建項目中運行npm run server

通過npm run 命令的跟蹤，最終發現指令轉換為：cmd.exe vue-cli-service serve。但是，system path中並沒有vue-cli-service對應的指令。實際上，nodejs運行cmd程序時，改變了程序運行時的path信息，添加了對應node_modules/.bin路徑，我們在該路徑下可以發現vue-cli-service.cmd文件，同時還發現了webpack等。打開vue-cli-service.cmd文件

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
)

最終運行的是腳手架添加的vue-cli-service.js文件。npm run server => node vue-cli-service.js server