Vue项目 npm run xxx执行过程

理解npm run dev 执行过程

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
  },

启动项目的使用我们一般是使用npm run dev来启动，启动的时候，会执行vue-cli-service serve这条命令。

不直接使用vue-cli-service serve是因为操作系统中不存在该命令。

使用npm run dev能启动的原因，是项目在npm install 安装项目依赖的时候创建了vue-cli-service几个可执行的文件，在node_modules/.bin目录下。

node_modules/.bin目录下的文件，表示一个个软连接。顶部写着 #!/bin/sh ，表示这是一个脚本。

vue-cli-service 文件
vue-cli-service.cmd文件
vue-cli-service.psl文件

# unix 系默认的可执行文件，必须输入完整文件名
vue-cli-service

# windows cmd 中默认的可执行文件，当我们不添加后缀名时，自动根据 pathext 查找文件
vue-cli-service.cmd

# Windows PowerShell 中可执行文件，可以跨平台
vue-cli-service.ps1

vue-cli-service文件

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node"  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
  ret=$?
else 
  node  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
  ret=$?
fi
exit $ret

vue-cli-service.cmd文件

@ECHO off
SETLOCAL
CALL :find_dp0

IF EXIST "%dp0%\node.exe" (
  SET "_prog=%dp0%\node.exe"
) ELSE (
  SET "_prog=node"
  SET PATHEXT=%PATHEXT:;.JS;=;%
)

"%_prog%"  "%dp0%\..\@vue\cli-service\bin\vue-cli-service.js" %*
ENDLOCAL
EXIT /b %errorlevel%
:find_dp0
SET dp0=%~dp0
EXIT /b

vue-cli-service.psl文件

#!/usr/bin/env pwsh
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent

$exe=""
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
  # Fix case when both the Windows and Linux builds of Node
  # are installed in the same directory
  $exe=".exe"
}
$ret=0
if (Test-Path "$basedir/node$exe") {
  & "$basedir/node$exe"  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" $args
  $ret=$LASTEXITCODE
} else {
  & "node$exe"  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" $args
  $ret=$LASTEXITCODE
}
exit $ret

node_modules/.bin目录下软件连接来源与项目下的package-lock.json文件。

在项目进行 npm install 时，npm 读到该配置后，就将该文件软链接到 ./node_modules/.bin 目录下，而 npm 还会自动把node_modules/.bin加入$PATH，这样就可以直接作为命令运行依赖程序和开发依赖程序，不用全局安装了。

所以，npm install 的时候，npm 就帮我们把这种软连接配置好了，其实这种软连接相当于一种映射，执行npm run dev 的时候，就会到 node_modules/bin中找对应的映射文件，然后再找到相应的js文件来执行。