前言

Service的run函数其实很简单，但是第一次看会有点懵

代码很简单，主要做了几件事：

1. 确定命令的运行模式

const mode = args.mode || (name === ‘build‘ && args.watch ? ‘development‘ : this.modes[name])

2. 设置可忽略的插件

this.setPluginsToSkip(args)

3. 初始化

this.init(mode)

4. 获取到命令行实体

let command = this.commands[name]

5. 运行命令行

...
    return fn(args, rawArgv)

主要比较懵的是第四点和第五点 这就要涉及到另外一个类\@vue\cli-service\lib\PluginAPI.js

PluginAPI.js

PluginAPI其实可以理解成为插件的基类，它主要是定义了插件加载时候可用的函数。

在init代码中有这么一段：

    // apply plugins.
    this.plugins.forEach(({ id, apply }) => {
      if (this.pluginsToSkip.has(id)) return
      apply(new PluginAPI(id, this), this.projectOptions)
    })

我们在构造函数中整理了plugins列表后，真正把pluginsId转换为command的其实是上面的代码

以serve指令为例

我们可以看到serve的export代码：

//serve,js

module.exports = (api, options) => {
      api.registerCommand(
            ...
          )      
}

实际上其他指令build,help,inspect的exports都是一样带有两个参数的函数

接下来我们看看PluginAPI的registerCommand方法

  registerCommand (name, opts, fn) {
    if (typeof opts === ‘function‘) {
      fn = opts
      opts = null
    }
    this.service.commands[name] = { fn, opts: opts || {}}
  }

所以第四点和第五点的commands和fn就是通过这个函数来的。
接下来我们看看serve的fn具体做了什么：

1. 对一些值进行初始化（http协议的选择，url的组成，proxy等等）

...
    // resolve server options
    const useHttps = args.https || projectDevServerOptions.https || defaults.https
    const protocol = useHttps ? ‘https‘ : ‘http‘
    const host = args.host || process.env.HOST || projectDevServerOptions.host || defaults.host
    portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port
    const port = await portfinder.getPortPromise()
    const rawPublicUrl = args.public || projectDevServerOptions.public
...

2. 创建一个webpack的compiler
3. 初始化webpack-dev-server

webpack-dev-server一个小型的nodejs静态文件服务器，它可以在compiler生成资源文件后提供Web服务

4. 把通过webpack生成的目录文件通过webpack-dev-server发布，并监听变化。

以上就是npm run server的主要流程。
从上面可以看到核心是在webpack compiler和webpack-dev-server
所以接下来会进行研究webpack。

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

原文：https://www.cnblogs.com/allaboutcoding/p/13153641.html