有了编辑器还不够，最大的问题是，如何方便的接入组件到编辑器中去？
我们是基础部门，最终目的还是要让业务部门去接入组件。但好在让业务部门正式接入之前，我们需要开发一些基础的内置组件，如图片、视频这些。这让我们有机会从组件开发的角度去体会，怎样才能方便的开发组件。
基础能力封装
在开发组件的过程中，最烦恼的是还要去管以前需要管的事情，比如发送请求、请求客户端的 bridge 等。
从编辑器的角度来看，每个组件的能力都要管控，将其能力限制在一个隔离空间，让组件没办法在运行时一不小心就搞了一个大新闻。另外，尽量封装掉共通之处，使组件的基础行为统一起来，减少开发负担。
从编辑器的接入来看，需要提供统一的方式给组件接入和提供信息。比如一个组件接入编辑器，需要表明它的名字、分类，暴露出来的可编辑配置。
我们把这些需要提供的能力封装成了 SDK，组件开发的过程中所要用到，大部分都可以在这里面找到 ，它的大致结构如下：
Untitled-2020-05-22-1813
接入编辑器
这一部分其实在上面也有提及，sdk 对业务组件提供了类似叫 `registe` 的方法，由组件通过这个方法去传入自己的信息，大概长这个样子：
1registe({ 2 category: [ 3 CATEGORY.FORM 4 ], 5 usage: { 6 name: '组件例子', 7 desc: '这个组件的用途介绍, 8 thumbnail: 'foo.png' // 组件缩略图 9 }, 10 componentName: 'your-component0name' 11}) 12
当组件加载下来的时候，编辑器就可以读到组件的信息，按照分类去显示，也会去显示 usage 里面的信息。
但其实这样做不是很好，组件的说明性信息不应该和代码混合在一起。只需要通过 `componentName` 把组件和说明信息连接到一起就好。说明性的信息可以另外在别的地方维护。
脚手架工具
为了可以快速开始开发组件，基于 `create-react-app` 自定义了自己的脚手架工具。只需要运行 `npm run start` 就可以看到组件在编辑器里面的预览效果。有点像这样子：
Untitled-2020-06-03-1329-2
组件发布和注册
开发好了组件就直接发布到内部的 npm，但是还要让编辑器知道要不要去使用这个组件，于是我们另外开发了一个后台，去注册组件。
编辑器启动的时候，会从后台的接口去拉取已经注册过的组件，得到所有的组件包名。
页面自动发布
所谓发布页面，其实只有两个步骤，构建和上传文件。为了达到目的，我们配套了一个 web 服务。当用户完成页面的编辑后，编辑器产出的代码只是初步的` vue single file component`，还需要经过构建成最后的静态资源。
在这里有个值得注意的地方，为了节省每次 `npm install` 的时间，我们把所有页面打包需要用到的工具和资源都预装在配套的 web 服务里。比如服务启动的时候，就拉取目前所有的组件下来，这是一个一举两得的事情：
- 这些组件可以提供给编辑器使用。
- 组件可以提供给页面打包使用。
所以现在页面构建只需要通过 node 服务去 `npm run build` 即可。打包出来的资源，直接上传等待 CDN 回源。
但是这样的缺点也很明显，要拉取所有的组件下来，那如果组件成百上千个怎么办？随着接入的组件数量日渐增长，这是很有可能的。而且随着某个页面里面使用的组件增多，其构建时间也肯定变长。
有什么办法可以避免 `npm install` 组件和构建组件吗？
如果组件发布之后，就直接放到 CDN 了呢？有点像 unpkg.com 那样子。这样子组件发布上去之后，就可以在编辑器和生产环境的页面直接引入 JS 使用。既不用安装，也不用打包了！
最后
其实这不应该是最后，但是这暂时是目前我们的最后了。我们做到的也只是目前这个程度，回头去看，也只能算是无代码工具的玩具产品吧！相比现在火热的低代码和无代码平台，真的是没法比啊。
但眼下我们能优化的地方还有很多。既然已经涉及到了页面发布，那势必涉及到权限的问题。还有弹窗等『折叠的空间』如何进行拖拽操作？又或者能不能完善数据收集，做一个大盘出来，暂时每月的热门组件，和页面的发布次数冠军？
嗯，总之还有很多可以扩展。