Vue CLI 之 cli-service 源码解析(1)

327 阅读2分钟

「这是我参与2022首次更文挑战的第10天,活动详情查看:2022首次更文挑战」。

之前我们在讲 Webpack 时讲过,我们可以在 package.json 中的 scripts 中添加 "serve": "webpack serve" 脚本,之后就可以通过执行 npm run serve 命令去执行 webpack serve 命令,这个过程中,项目中的 webpack 会去读取项目目录下的 webpack 配置文件中的内容,之后再利用这些配置对当前项目(src 目录中的代码)进行打包,打包之后生成一个后续可以部署的文件夹。

但是在用 Vue CLI 创建的项目中,当我们执行 npm run serve 命令时,实际执行的是 vue-cli-service serve 命令:

image-20211214221420274

下面,我们就来简单讲一下 vue-cli-service 这一命令的原理。

当我们执行 npm run serve 命令时,实际会执行 vue-cli-service serve 命令,而 vue-cli-service 命令会去项目目录下的 node_modules/.bin/ 目录下寻找对应的命令:

image-20211215122455488

打开这个 vue-cli-service 文件,你会发现里面会去执行 node_modules/@vue/cli-service/bin/vue-cli-service.js 文件:

image-20211215123130044

那么我们来到 node_modules/@vue/cli-service 目录下,你也可以从该目录下的 package.json 文件中看到要安装的 bin 文件(到时候在安装完这个 cli-service 包之后,就会将这个 "bin" 选项中的命令(如这里的 vue-cli-service)安装到 node_modules/.bin/ 目录下(类似于之前我们安装 @vue/cli,期间也会安装 vue 这个命令)):

image-20211215123901628

所以在执行 vue-cli-service 命令时,其实执行的是 bin/vue-cli-service.js,即真正执行的代码是 node_modules/@vue/cli-service/bin/vue-cli-service.js 中的代码:

image-20211215124611668

其主要做的事是:

  1. '../lib/Service' 中拿到 Service 这个类;

  2. 通过 new Service() 执行 Service 类中的 constructor() 构造函数,获得一个 Service 类的实例对象 service

  3. 最后执行 service 对象的 run() 方法,同时传入了三个参数,其中的第一个参数传入了 command,这个 command 的值其实就是我们脚本命令 vue-cli-service 后面的第一个参数(我们这里就是 servebuild):

    image-20211215203917724

    image-20211215204045255

那么我们再来看 node_modules/@vue/cli-servie/lib/Service.js 文件中的 Service 类:

image-20211215204816766

可以看到,Service 类有一个 constructor() 构造函数,还有很多其它方法,下面我们主要来看 run() 方法。