大型Vue应用插件架构（一）

前言

相信有不少前端项目都面临庞大而难以维护的问题，要简化复杂度，首要处理的是「分而治之」的需要，即模块细化的问题。若一个大项目能拆分成若干个小项目，边界清晰并能相互协调，相信做开发的无论在效率方面、交付质量方面、工作辛福感方面，会比大而乱的项目要高很多。但很少前端项目会往模块化方向发展，而在最新的Vue3，虽然有策略在简化公共代码的引用（Composition API），原来的Plugin结构在一般使用上并没有太多展开。这篇文章尝试说明一个应用在拆分时，如何使用Plugin拆分，而拆分后的组件（模块）如何组合和协调，成为一个整体。

所有大型应用需要处理两个重要问题：

1. 功能如何拆分成可控的小粒度
2. 如何把多个小粒度合并成一个整体

针对这个问题，现在的大多数方向都往微前端（micro-frontend）倾斜，据说微前端的其中一个好处是各个分部可以独立发布和管理，这个方案是处理了分和合的问题，不过要合的有深度，各个部件需要有不同程度的协调与交互，而我理解的微前端在协调不同微前端这方面，并没有很好的处理。而我现在以另外一个方向处理分和合的问题。

整体思路

先定义最终结果：我们需要一个大型应用的前端（Vue）框架，让开发同学可以分开部分来开发，其交付的内容就是一个或多个npm包。

当需要集成的同学需要使用某一个功能特性，就可以很简单的引入（npm install）并在启动代码中增加一句代码（类似 Vue.use()），其功能就会被启用。当然最后打包的结果是一个前端网页应用。

这个结果有别于微前端的最终结果，这个方案仍然需要打包成为一个整体一起发布，这样更适用于商业软件的开发交付要求。

要达到这个目的，我们需要一个启动应用的内核，处理各个部分对系统作出的影响（即贡献：可参考我之前的文章）。

一套标准的做法是类似Eclipse插件模式：定义【扩展点】和【扩展】。我们的