组件市场设计

组件市场的这个概念设计想过很多次了，主要想解决以下的一些问题

• 每次编译的时候都会重新对这些依赖组件进行重新编译，构建速度慢
• 视图组件开发人员书写不规范在里面写了大量的业务逻辑，没有很好的区分
• 可用的视图组件分布在项目的各个角落不容易管理，跨项目使用起来比较困难

针对上述问题， 我想设计一个高可用的组件市场， 它主要实现了以下几个功能。

• 能够在线编辑和预览
• 能够在线引入其他的组件
• 能够按照项目把所有的组件打包在一起
• 能够直接通过 script 和 import 的方式去加载
• 具有版本管理功能
• 能够有个组件总览

根据上述的功能，简单的画了一个图

• Editor 代码编辑器部分， 主要负责在线编辑与在线预览
• Server 服务器，保存了组件的代码
• ResourceGenerator 资源生成，主要负责对代码进行解析，并分析里面的依赖，每次保存的时候，编译成 lib
• Uploader 上传，根据依赖的组件和版本号进行分类，并且上传到指定的对象存储服务器
• COS 对象存储服务器，存储已经编译好的文件
• 生成 npm 包

使用方法

1. 在 html 页面里直接使用 script 引用
2. 通过 import 的方式去异步加载组件
3. 直接通过 npm 包引用

相比本地文件的代码有几个好处

1. 没有上下文，与业务逻辑强隔离，可以在线专注的编写视图和API
2. 通过 script 的方式不需要二次编译， 代码提示可以通过 npm 包，然后 external 掉
3. 可以通过规则热更新lib
4. 更加方便的管理和添加以及各个项目复用