vue-cli命令npm run serve 源码解析

1. 前言

使用vue开发项目已经有一段时间了
是基于vue-cli样例项目进行开发
开发过程只要一句命令 npm run serve
就能在浏览器运行代码看效果，还附带热更新功能
但是一直不知道这个命令行背后做了什么
今天就来初步剖析一下

2. 命令行定义

首先我们可以先查看项目根目录的package.json文件
可以看到npm run serve指令实际上等价于 vue-cli-service serve
而vue-cli-service 是在node_modules/.bin/vue-cli-service定义的 里面是一个sh脚本

3. node_modules/.bin/vue-cli-service

而通过node_modules/.bin/vue-cli-service看到实际上是用node运行了@vue/cli-service/bin/vue-cli-service.js

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

其中的$@就是获取命令的所以输入（不包含$0）

4. vue-cli-service.js

这个类是一个总接口 非常简单

1. 引入@vue/cli-service/lib/service.js 作为Service 所有的逻辑代码都在这个类里面
   const Service = require('../lib/Service')

2. 使用minimist库获取命令行输入的值

minisist类（这是一个轻量级的命令行参数解析引擎）

const args = require('minimist')(rawArgv, {
  boolean: [
    // build
    'modern',
    'report',
    'report-json',
    'inline-vue',
    'watch',
    // serve
    'open',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})
const command = args._[0]

这里我们可以看到指令vue-cli-service定义的 命令 和对应命令 可添加的参数

3. 获取到command是我们输入的__serve__ ,并作为参数运行：

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})