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)
})