前端插件机制剖析及业界案例分析

导语

如果你的工具型面对的对象有很丰富的场景需求，或者不想再为频繁的增减需求而频繁迭代，是时候考虑为你的系统设计一款插件系统。

插件机制

插件机制：

Core-Plugin 架构的组成

• Core：基础功能，提供插件运行的环境，管理插件的注册与卸载（可拔插）以及运行，也即管理插件的生命周期。
• PluginApi：插件运行的接口，由 Core 抽象出来的接口。（颗粒度尽可能小）
• Plugin：每个插件都是一个独立的功能模块。

Core-Plugin 模式的好处，总结几点：

• 提高扩展性；
• 减少因功能改变而引起的项目迭代，即使是需要扩展基础功能，也可以以插件的形式单独发包，配合 monorepo；
• 充分利用开发者 / 开源的力量，激发更多的想法；

和开箱即用的库 / 组件功能模块相比，可能比较明显的缺点就是，Plugin 的开发需要遵循规范，复杂一点的库（比如 Babel、webpack）还需要理解其运行原理，会相对有些门槛。

插件机制在开源项目中的运用

babel 插件机制

官方定义：Babel 是一个 JavaScript 编译器。

babel 大家都很熟悉，最重要的功能是将 ES6 版本的代码转换为 ES5 语法，使我们的代码能兼容不同的浏览器以及版本。随着 ES 语法的日渐丰富和扩展，对 babel 转换代码的规则也有更多的要求，babel 提供了一套插件机制支持开发者自定义插件来实现特殊的转换规则。在了解 babel 插件机制之前，需要掌握如下知识点:

1. babel 转换流程。
2. 如何开发 babel 插件。
3. babel 插件的执行流程。

babel 转换流程：

推荐一个网站：https://astexplorer.net/，在线 AST 解析器。

• 分析 (parse) 通过语法解析和词法分析生成 抽语法树 (AST);babel 用工具库 @babel/parser 来解析 ast

例子