CoderKing
Appearance

Vue-CLI的运行原理分析

CoderKing2022-09-05 00:00:00

一、执行原理步骤图

image-20220706162217263

二、具体代码实现

1. 运行pnpm run server会发生什么？

(1) 执行pnpm run server

系统会执行package.json中"scripts"中，配置好的快捷指令"dev": "vue-cli-service serve"。

image-20220706161137224

此命令会执行node_modules/.bin/vue-cli-service软连接文件

(2) 执行vue-cli-service.js文件。

vue-cli-service软连接文件连接到的是@vue/cli-service/bin/vue-cli-service.js文件，最终执行的是vue-cli-service.js文件。

image-20220706161950436

2. vue-cli-service.js干了什么

image-20220706162607299

(1) 导入lib/Service文件并创建实例，执行service构造函数 image-20220706163357791

将builtInPlugins通过map映射到idToPlugin，apply函数后续动态导入builtInPlugins配置中的文件。

image-20220706163717338

(2) 拿到command(你pnpm run XXX 传来的值[serve/build])，传给run调用service.run方法

image-20220706164952905

调用init函数加载环境变量。遍历所有插件，拿到id和apply方法，调用apply方法，requice(加载)文件并拿到返回值。

image-20220706165330843

创建PluginAPI实例对象并根据builtInPlugins加载文件。将加载后返回的结果赋值给commands。

image-20220706170905044

image-20220706170141902

最后从commands中根据传过来的name[command]拿到command，并从command中解构出fn()方法并执行，加载webpack的配置运行启动DevServer服务

3. fn函数执行步骤

拿到webpack，webpack-dev-server函数

image-20220706171317753

获取webpack配置

image-20220706171420758

首先拿到vue.config.js自己设置的配置，然后拿到脚手架中预设好的webpack配置

image-20220706171610591

image-20220706171558682

预设好的webpack配置是在init初始化中导入builtInPlugins/config中的配置

image-20220706171701187

image-20220706171722996

然后将webpackConfig配置传给webpack函数得到compiler

image-20220706172700749

将compiler传给WebpackDevServer构造函数从创建server实例

image-20220706172956254

最后通过listenc函数，设置主机和端口号并启动DevServer服务。

image-20220706173043094

ON THIS PAGE