What npm run server in the end run dry after use vue-cli initialization

Class command npm

In carrying out front-end development, we will often use a variety of command line instructions, these instructions are how to achieve it? In the cmd command line commands you can use is definitely a corresponding application to add to the path inside the path, the path to find path to find some instructions nodejs used does not find the path to the new value, and how these instructions are come about?

When installing nodejs, in order to use the command node, we will nodejs installation path to the path path, in which case, you can use the command node, the node view of the path, we can see a npm.bat file, this npm.bat npm file is the corresponding command.

:: 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%" %*

As can be seen from the above code, actually used nodejs js files related to the operation implemented.
General added in the path of the path:

• nodejs installation path (including node, npm)
• C: \ Users {useraccount} \ AppData \ Roaming \ npm (including npm, webpack, vue-cli, etc.)

How to debug the nodejs

An visual studio, installation nodejs plug-in, create a nodejs project, modify the properties of the project, adjust the relevant startup information, then you can make the appropriate js code debugging. Can track a command to run in the end run some what.

npm run the command

Debug tracing through 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_{}

By tracking, we can find, npm run xxx actually end up converted into command cmd run relevant. The end result is:

npm run xxx
xxx是从package.json的script中取出的对应命令。

vue-cli create a project run npm run server

By tracking npm run command instructions into eventually found: cmd.exe vue-cli-service serve. However, system path and no instructions vue-cli-service corresponding. In fact, when nodejs run cmd program, change the path information program is running, add the corresponding node_modules / .bin path, we can find vue-cli-service.cmd file in this path, but also found webpack and so on. Open vue-cli-service.cmd file

@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" %*
)

The final run was vue-cli-service.js file scaffolding added. npm run server => node vue-cli-service.js server