当你创建了一个vue项目 vue create 项目名, npm run xxx时的部分流程
以npm run serve运行项目举例 (serve 只是一个代理名字和自己定义,但尽量语义化),npm run是npm run scrip的简写,调用运行在vue的配置文件package.json中的scrpit的配置项。
1.运行npm ru serve 可以运行项目,运行npm run vue-cli-service就不可以呐。
1. 首先,npm run vue-cli-service这奥指令是不存在的,那我们为什么可以用npm run serve 来执行那
2. 那是因为我们在安装依赖,执行npm i xxx的时候,npm在安装这个依赖的时候,在
node_modules/.bin/的目录中为文明创建好了3个名叫 vue-cli-service(xxx)的可执行文件,这些文件
表示的是一个个的软连接,有些文件头部有#!/bin/sh表示这是一个脚本文件,而软连接文件来自package-lockjson
3. 当我们调用serve的时候运行时,webpackDevServe开启了一个服务,当你使用npm run xxx命令
的时候,会根据你packagejson配置文件找到script标签下的调试命令执行 (此时npm会自动的将
node_modules/bin目录添加到$PATH的环境变量中,执行完毕后有自动的删除),通过软连接找到对应
node_modules/.bin的映射文件, 通过.cmd文件的执行处理脚本文件,并调用@vue/cli-
service/bin/vue-cli-service.js文件,调用service.run方法开起一个服务:
service.run:
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})
第一个参数command就是表示的serve这个参数
最后由调用了Service.js中的asycn.run方法
async run (name, args = {}, rawArgv = []) {
const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])
this.setPluginsToSkip(args)
this.init(mode)
args._ = args._ || []
let command = this.commands[name]
if (!command && name) {
error(`command "${name}" does not exist.`)
process.exit(1)
}
if (!command || args.help || args.h) {
command = this.commands.help
} else {
args._.shift() // remove command itself
rawArgv.shift()
}
const { fn } = command
return fn(args, rawArgv)
}