关于 vue/cli 脚手架实现项目编译运行的源码解析

1.vue项目运行命令解析

在日常开发中，vue 项目通过vue-cli-service脚手架包将项目运行起来，常用的命令例如：

npm run serve

npm run build

上述执行命令实际一般对应为项目中 package.json 文件的 scripts属性中编写的脚本命令，在项目目录中的终端运行时即匹配到对应的脚本命令，例如：

匹配对应的脚本命令，例如npm run serve ，即运行 vue-cli-service serve 脚本命令，此时，会去加载项目中 node_modules 文件夹中的**.bin 文件找到对应的执行文件，如下：**

2.关于 node_modules 中 vue-cli-service 文件的加载过程

在加载 vue-cli-service 文件的过程，我们知道mode_modules 中.bin 文件对应的是链接文件，即实际会找到 node_modules 文件夹下的vue-cli-service 依赖包中的对应vue-cli-service.js文件加载运行

即找到 node_modules 文件夹下的@vue包下面的cli-service包下的vue-cli-service.js 文件进行运行，如下：

可以看到.bin 文件中的 vue-cli-service 文件与@vue/cli-service/bin/vue-cli-service.js 文件内容一致，实际运行的也是@vue/cli-service/bin/vue-cli-service.js，可以发现文件中主要引入了../lib/Service文件，并创建 service 类，调用 service 类中的 run 方法，接下来就是对应找到service 类中对应的 run 方法的运行内容。

注意：传入 run 方法中的 command在运行 npm run serve时，这时的 command即等于字符串 serve 即脚本命令中的后面的参数

我们找到/lib/Service 文件，如下：

可以看到 run 方法中主要调用了fn函数，fn 从方法中的 command中取出，command从 this.commands通过 $name$ 取出，即 this.commands $'serve'$ ，但是在该文件中可以看到 commands 并没有什么初始化赋值操作，如下：

此时回到 run 方法中可以看到在执行 fn 函数前，主要执行了这两个方法，我们主要看 init 初始化函数，setPluginsToSkip 方法主要是做对一些内置 plugins 进行忽略

javascript 复制代码

    // --skip-plugins arg may have plugins that should be skipped during init()
    // 需要忽略的默认 plugins
    this.setPluginsToSkip(args)

    // load env variables, load user config, apply plugins
    this.init(mode)

找到 init() 方法，如下

在 init 方法中我们主要看这段代码，其他代码是主要做一些配置处理，实际主要是看 apply 方法的的调用

javascript 复制代码

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

可以看到是对文件中的 this.plugins 进行循环，结构每个 item 中的 apply 方法进行调用，我们找到 plugins 的初始化，如下：

可以看到，Service 类中初始化是对 plugins 赋值通过调用了 resolvePlugins 方法进行初始化，如下：

在resolvePlugins 方法中我们可以看到遍历了builtInPlugins，进行赋值给 plugins 并返回

此时回到 init 方法中对 this.plugins的遍历即 apply 调用：

我们即可得知，apply 的调用，是对 resolvePlugins方法中的的 require(id)调用，如下：

在 run serve的时候，实际即对应 require('./commands/serve')去加载对应该文件，我们进入到该文件，如下：

查看./commands/serve文件可以看到，文件主要导出了上述的回调函数，回调函数内部调用了api.registerCommand函数，关于为什么可以取到到 api.registerCommand调用，我们就要回到apply() 函数调用的时候的传参，如下：

可以看到是创建了 PluginAPI这个类，并把 id 传入（./commands/serve等等）及当前上下文 this,我们找到 PluginAPI的类文件，如下：

可以看到PluginAPI类中的定义了registerCommand方法，而该方法的内容中可以看到对 this.service.commands $name$ 赋值了{fn，opts}对象，这就解释了前面@vue/cli-service/bin/vue-cli-service.js中的 run 方法为什么可以取出 fn 函数进行调用，即下图:

此时我们最后来看 fn函数，对应的是什么内容，如下：

最后我们去看 serve()函数内容，如下：

3.找到 webpack加载文件处

可以看到熟悉的Starting development server...，即项目运行时终端中会打印的信息，继续往下查看该函数，最终可以看到运用 webpack 包，并传入config配置解析，并使用 WebpackDevServer 这个 plugin，即开启本地运行的插件，如下：

函数的最后我们可以看到，启动了 server 的监听函数，即成功将项目编译完成开启本地服务运行，如下：

4.总结

通过解析vue-cli-serve的源码，以上便是 vue-cli脚手架运用 webpack 进行内部封装，如何实现脚手架内将项目解析打包，加载在内存中，并拉起本地服务，实现本地运行vue项目的流程。

npm run serve -> vue-cli-service.js ->service.run ->service.init ->apply ->require('./commanmds/serve') ->PluginAPI.registerCommand -> serve()