npm run xxx发生了啥?

954 阅读2分钟

npm run xxx发生了什么?

我们执行例如 npm run server的时候,首先会去项目根目录的package.json文件里找scripts字段 里找对应的serve,然后执行后面的代码vue-cli-service serve 这条命令
但是直接执行vue-cli-service serve,会报错,因为操作系统中没有存在vue-cli-service这一条指令 因为我们没有全局下载,所以就会报错没有这条指令。
但是为什么使用npm run serve地时候就可以呢? 那是因为我们在安装的时候通过npm i xxx 的方式安装,那么就会在node_modules的bin目录中为我们创建好对应的软连接可执行文件,bin目录下的那些软连接文件是哪里来的呢?它又是怎么知道这条软连接是执行哪里的呢?

image.png


比如这里的三个文件

image.png

点开vue-cli-service文件就可以看到 #!/bin/sh 表示这是一个可执行脚本

image.png

所以我们在执行npm 会到 ./node_modules/.bin 中找到 vue-cli-service 文件作为 脚本来执行 那么这个几个文件从哪里来的呢?

从哪来的?

当我们使用 npm 或者 yarn 命令安装包时,如果该包的 package.json 文件有 bin 字段,就会在 node_modules 文件夹下面的 .bin 目录中复制了该包bin 字段链接的执行文件。我们在调用执行文件时,可以不带路径,直接使用命令名来执行相对应的执行文件。

比如我们通过npm 安装了 qrcode这个包那么在node_module下就可以找到qrcode下对应的package.json文件,其中有一个bin属性,那么在 mode_module.bin下面就会复制该包bin 字段链接的执行文件,这里是qrcode

image.png

image.png

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

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

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

软连接是执行哪里的呢?

如果我们在 cmd 里运行的时候,windows 一般是调用了 vue-cli-service.cmd,这个文件,这是 windows 下的批处理脚本: 所以当我们运行vue-cli-service serve这条命令的时候,就相当于运行 node_modules/.bin/vue-cli-service.cmd serve

@ECHO off
GOTO start
:find_dp0
SET dp0=%~dp0
EXIT /b
:start
SETLOCAL
CALL :find_dp0

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

endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\@vue\cli-service\bin\vue-cli-service.js" %*

然后这个脚本会使用 node 去运行 vue-cli-service.js这个 js 文件

参考文章运行 npm run xxx 的时候发生了什么?