前端，何不尝试一下『插件化』开发

前端组件化开发

随着MVVM的框架和库的流行，想必组件化开发已经成为了前端开发的主流思想，特别是Vue、React、Angular已经有比较成熟的开发模式、社区和UI组件库。

现在的前端，开发页面代码量太、逻辑多、同一功能组件可能在多个页面中复用。而这些框架或库的出现，很好的将页面进行了功能拆分、组件封装，组件的通用性大大的提高了可维护性。同时功能单一的组件也极大的解耦了系统间功能的耦合，大大的提高了前端工程的开发和维护难度，提高了开发效率。

我在企业中的前端开发

我曾从事过多个类型的前端项目开发工作，初创型功能明确产品、成熟型功能明确产品、面向企业或单位的部分功能不明确产品都有涉猎。下面介绍一下我所遇到的产品特点。

初创型功能明确产品特点

产品功能很固定
需要不定期维护和更新
时常有新功能需要上线

成熟型功能明确产品

产品功能很固定
需要定期维护和更新
定期上线新功能
有2个以上类似系统重用绝大部分功能
开发上线不能影响其他功能
功能复杂，全站回归测试很耗时

面向企业或单位的部分功能不明确产品

产品需要在不同地方定制开发和部署
产品有很大部分功能相同或相似
需要进行后期维护

我如何解决代码重用、快速开发

『成熟型功能明确产品』和『面向企业或单位的部分功能不明确产品』都有一些共同的特点。

很大部分逻辑功能是相同的，它们可能会用在很多的系统里面
这些功能是需要维护的，不可能维护一个功能要去N个系统里面修改
修改某一部分功能不会影响到其他功能，可以随时上线，全站回归的成本太高。

而我的整体思路是渐进式的封装到可视化开发

建立内部UI组件库（封装粒度小）
基于UI组件库搭建业务组件库（封装粒度一般，有部分功能逻辑）
基于UI组件库和业务组件库建立插件库（封装粒度大，包含完整业务逻辑）
* 基于插件化开发的模板编译生成页面代码
* 基于平台的可视化配置+模板编译的低代码开发平台

什么是插件化开发

借用内核+应用软件开发的思想，首先有一个插件调度的核心，在这个核心的支持下可以开发支持这个核心的应用程序，我把这些应用程序称为『插件』，插件是一个具有完整逻辑的应用程序，它不依赖任何其他的插件，只需要依赖核心即可在系统中独立运行。

核心所包含内容

插件调度
基础组件（引用自建或第三方）
基础服务

http服务
数据格式转换
时间转换等
事件总线
其它

自动加载插件文件（异步）

插件系统核心作为插件的环境依赖，为插件提供基本的服务、插件调度、事件和其他的一些基本功能。插件之间的相互调用可以通过插件核心进行传递，且这个调用是解耦的，不影响插件内部的逻辑。插件核心所提供的基础组件、业务组件来自于外部依赖，所以插件核心是一个相对精简的核心，可以通过外部依赖来扩展插件核心的功能。

插件的核心我已发布到NPM，可以通过NPM直接安装。

扫描二维码关注公众号，回复： 13469728 查看本文章

插件系统NPM链接

插件化开发DEMO

我也为插件化开发制作了一个DEMO，感兴趣的同学可以试试。

DEMO示例GitHub地址

在我的系统定义中，每个插件都会被编译为一个文件，

每个插件的调用都是异步的。

如何使用

目前只发布了React的DEMO，后期会开发Vue的DEMO

第一步：在项目中安装插件核心

npm i react-plugin-system复制代码

第二步：在webpack.config.js中添加plugin的alias，指定插件的目录

// webpack.config.js
{    alias: {        "@plugins": path.resolve("./src/plugins"),    }}
复制代码

第三步：在入口文件注册插件

// src/index.jsimport { register } from "react-plugin-system";
let pages = require.context("@plugins", true, /\/.*config\.js$/);
pages.keys().map(key => { 
  let config = pages(key).default;  
  // reigster plugins  
  register(config); 
  return config;
});
复制代码

第四步：编写一个插件，插件包含配置文件和代码文件，配置文件用于指定插件的唯一id和定义插件的入口文件，核心可以通过配置文件找到插件具体位置。插件代码文件用于编写插件具体业务。

// src/plugins/add/config.js
export default { 
   id: "add",  
   index: "add/index.js"
};复制代码

// scr/plugins/add/index.js
import { message } from "antd";
export default function(config = {}) {
  const { calllBack = () => {} } = config;
  message.success("Add success!");
  calllBack();
}复制代码

第五步：使用插件

// src/pages/*/*.jsx
import React from "react";
import { callPlugin, Plugin } from "react-plugin-system";
export defalut class ButtonBox extends React.Component {
    constructor(props) {        
        super(props);        
        this.state = {};
    }
    /**     
    * add     
    */    
    addHandle = async () => {       
         // callPlugin        
        const path = (callPlugin('add'));        
        const plugin = await import("@plugins/" + path);        
        (plugin.default)({ a: 1 });    
    } 
    /**
    * infoClose
    */
    infoCloseHandel = (data) => {
        console.log(data)    
    }
    render() {
        const path = (callPlugin('info'));
        return <div>
            <Button icon="plus" onClick={this.addHandle}>ADD</Button>            
            <Plugin importComponent={() => { return import("@plugins/" + path) }} onClose={this.infoCloseHandel} />
        </div>
    }
}
复制代码

其中包含组件方式和函数方式两种调用方式。

后期规划

目前开源还处于比较初级阶段。框架方面，后期将支持VUE；社区方面，将搭建一个插件市场，用于将开发好的插件发布到平台，可以在平台上进行插件搜索、插件预览；工具方面，将开发一个CLI，能快速初始化一个标准的插件开发环境，快速转换普通代码为插件，快速安装平台发布的插件；更深层次，将开发基于ejs编译的可视化平台，通过可视化平台进行在线配置，编译生成基于插件的可二次开发的低代码开发平台。

本项目纯个人爱好，希望有兴趣的同学可以提意见或则参与到项目完善中，如果觉得项目还有点意思，欢迎给我家star哦。