【邮件保护】插件系统浅析

[emailprotected]是Vue项目全新的脚手架。与1.x/2.x基于模板的脚手架不同，【emailprotected】采用基于插件的架构，将一些核心功能汇聚到CLI中，并向开发人员公开可扩展的API，供他们灵活扩展和配置CLI功能。接下来，我们将看看如何通过[emailprotected]的源代码设计插件架构。

整个插件系统包含两个重要组件：

@vue/cli，提供cli命令服务，如vue create创建新项目；@vue/cli-service提供本地开发和建设服务。@ vue/CLI-服务

当您使用Vue create project-name创建新的Vue项目时，您会发现生成的项目与使用1.x/2.x初始化项目时从远程位置拉出的模板相比发生了很大的变化，其中与webpack和npm脚本相关的配置没有直接在模板中公开，而是提供了一个新的npm script:

//package . JSON ' scripts ' : { ' serve ' : ' vue-CLI-service serve '，' build ' : ' vue-CLI-service build '，' lint' :' vue-CLI-service lint '的前两个脚本命令是基于webpack和项目中本地安装的@vue/cli-service提供的相关插件封装的本地开发/构建的服务。@vue/cli-service将webpack和相关插件提供的功能汇聚到@vue/cli-service。

这两个命令分别对应node _ modules/@ vue/CLI-service/lib/commands下的serve.js和build/index.js。

在serve.js和build/index.js中，分别公开了一个函数和一个defaultModes属性供外部使用。实际上，它们都被用作vue-cli-service的内置插件。

说到这里，让我们看看整个插件系统是如何构建在@vue/cli-service内部的。以执行npm运行服务启动本地开发服务为例，大致流程如下：

查看@ vue/cli-service(@ vue/CLI-service/bin/vue-CLI-service . js)提供的CLI启动门户服务：

#!/usr/bin/env nodecost sever=require(' sever ')const { error }=require(' @ vue/CLI-shared-utils ')const Service=require('./lib/Service') //引入Service基类const service=新服务(process . env . vue _ CLI _ context | | process . CWD())//实例化服务const rawArgv=process . argv . slice(2)const args=require(' minimum it ')(rawArgv)const command=args。_[0]service.run(command，args，RawArgv)。catch(err={//开始执行对应的service service err(err)process . exit(1)})看到这里，你会发现bin中没有与本地开发service相关的服务。实际上，项目中本地安装的@vue/cli-service提供的服务，无论是内置的还是插件的，都是动态的，完成相关cli服务的注册。

核心类Service是在lib/Service.js中定义的，它作为@vue/cli的运行时服务而存在。执行npm运行服务后，首先完成服务的实例化：

Classservice {构造函数(上下文)}.this . webpackcainfns=[]//数组中的每个项都是一个fn this . webpackrawconfigfns=[]//数组中的每个项都是一个fn或webpack对象文字配置项this.d