「这是我参与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
命令:
下面,我们就来简单讲一下 vue-cli-service
这一命令的原理。
当我们执行 npm run serve
命令时,实际会执行 vue-cli-service serve
命令,而 vue-cli-service
命令会去项目目录下的 node_modules/.bin/
目录下寻找对应的命令:
打开这个 vue-cli-service
文件,你会发现里面会去执行 node_modules/@vue/cli-service/bin/vue-cli-service.js
文件:
那么我们来到 node_modules/@vue/cli-service
目录下,你也可以从该目录下的 package.json
文件中看到要安装的 bin
文件(到时候在安装完这个 cli-service
包之后,就会将这个 "bin"
选项中的命令(如这里的 vue-cli-service
)安装到 node_modules/.bin/
目录下(类似于之前我们安装 @vue/cli
,期间也会安装 vue
这个命令)):
所以在执行 vue-cli-service
命令时,其实执行的是 bin/vue-cli-service.js
,即真正执行的代码是 node_modules/@vue/cli-service/bin/vue-cli-service.js
中的代码:
其主要做的事是:
-
从
'../lib/Service'
中拿到Service
这个类; -
通过
new Service()
执行Service
类中的constructor()
构造函数,获得一个Service
类的实例对象service
; -
最后执行
service
对象的run()
方法,同时传入了三个参数,其中的第一个参数传入了command
,这个command
的值其实就是我们脚本命令vue-cli-service
后面的第一个参数(我们这里就是serve
或build
):
那么我们再来看 node_modules/@vue/cli-servie/lib/Service.js
文件中的 Service
类:
可以看到,Service
类有一个 constructor()
构造函数,还有很多其它方法,下面我们主要来看 run()
方法。