以react为例

首先执行npm run xxx的时候他会去package.json文件的script中找对应的脚本命令, 如下代码所示

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build;",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "npx eslint ."
  },

那么问题又来了, 如果执行例如npm run start的时候所执行的react-script start又是什么呢? 如下图所示, 你的node_modules里面是有一个react-script脚本依赖的, 就是执行的它

微信截图_20221213143536.png

那vue是什么样子呢? 让我们逐步来看

{ 
    "name": "h5", 
    "version": "1.0.7", 
    "private": true, 
    "scripts": { 
        "serve": "vue-cli-service serve" 
    }, 
}

从上述代码可以看出来vue中执行npm run serve 的时候其实是执行了vue-cli-service serve, 众所周知vue-cli-service是vue脚手架, 那问题来了, react是直接指向了运行脚本, vue为什么不直接执行vue-cli-service serve呢, 答案是操作命令中是没有vue-cli-service serve这条命令的, 所以它会去找vue-cli-service来执行这个命令, 但是相对的vue-cli-service这行命令也是不能在命令行执行的啊, 他又是怎么执行的呢? 请看下图, package-lock.json文件里面的内容

如图所示我们发现了这个命令的所在地, 但是我依然无法得知这个命令为什么会读到这个地方, 所以还需要继续寻找,经过我的寻找, 在juejin.cn/post/707892… 发现一段话:

我们在安装依赖的时候，是通过npm i xxx 来执行的，例如 npm i @vue/cli-service，npm 在安装这个依赖的时候，就会node_modules/.bin/ 目录中创建好vue-cli-service 为名的几个可执行文件了

真相了, 我又去看了对应的文件

如图所示的软连接便可以链接到我们之前提到的package-lock.json里面的bin里面的内容了, 所以最后就执行了其中的vue-cli-service.js脚本文件, 当然执行的时候先找全局的vue-cli-service脚手架包, 如果没有就找当前node_modules里面的vue-cli-service脚手架包里面的vue-cli-service.js文件了

当输入npm run xxx 的时候到底干了什么事 ?

以react为例

那vue是什么样子呢? 让我们逐步来看