前言
千呼万唤始出来，iofod 提供了一个类似微前端的组件容器，支持装载任意前端组件或应用，复用社区现有组件资产。然而官方更新的开发文档比较简练，省略太多细节，不易于入门的同学上手，本文作为对官方文档的补充，将一步一步演示在 iofod 导入自定义组件的功能。
一、组件打包
我们将以 vite 和 element UI 来演示导入打包组件到iofod，并且通过一步一步实现保证所有同学都能Get到。对各种前端工程化工具如数家珍的卷王亦可参考本文思路，构建自己的工作流。
首先，打开你电脑本地的终端工具，初始化工程模板，我们使用 vite 作为构建工具：
框架选择Vue
生成项目模板后，进入项目目录，安装 npm 依赖
安装 element-plus 依赖
接着，根据 elm 官网提示，修改 vite 配置来支持按需导入
安装下 unplugin-element-plus 依赖
修改 Vue 单文件组件，引入一个 el-button 组件到页面，去掉一些无关内容
导入 element UI 样式文件到全局（可选，样式作为公共依赖也可以，详见后文）
接着执行本地调试命令
查看效果，还不错！
前面是基础的准备，假如我们组件的功能就开发到这儿结束，那么要怎么引入到 iofod 里呢？ 接着看。
二、导入到iofod
iofod 要求导入的外部组件必须是一个 ES 模块，模块暴露 setup 方法给 iofod 调用来初始化外部组件。我们根据要求，把直接挂载 Vue 实例的这一行代码改造成通过 setup 传入挂载节点的模式：
接下来将组件打包，有两种方式，我们可以选择用Vite库模式的方式构建打包，也可以常规项目的模式直接打包，然后手动或通过脚本的方式暴露 setup 方法，后者适用于不能用库模式打包的情况，读者可自行尝试，这里只示范第一种，也是建议大家使用的方式。
我们修改 vite.config.js 文件，新增 lib 相关配置，设置为 es 格式
然后执行生产构建命令
开启本地静态服务器进行预览
接下来需要进入iofod 编辑器，开启引入外部组件的功能特性，可参考【官方文档】。开启特性后可在组件栏目看到一个【实验性】目录
我们拖动并添加一个外部组件到界面，根据我们打包生成的文件结构来配置外部组件。比如我们的示例项目打包生成如下结构
根据目录结构设定外部组件的模型变量以及外部依赖，entry 模型变量的地址应该指向 dist/index.js，而 style.css 作为外部依赖。设定完成后，即可看到组件导入到 iofod 的效果了
确认组件没问题后，可选择托管到云或者自己的服务器上
至此一个第三方组件导入iofod的流程就结束了。解决完外部组件的导入问题，想必大家也会问：如果需要使用到多个同框架的外部组件怎么办？接下来就是针对性讲优化部分的内容。
三、优化（可选）
假如我们同一个应用需要导入多个外部组件，这些组件使用类似的框架，比如都使用 Vue 和 Element UI，那么我们可以把他们两者抽离出来作为公共依赖。我们以之前例子的基础上继续示范。
根据 elm 官网的提示，我们可以将 Vue 和 element UI 的样式文件作为公共依赖
一般情况下我们也不会用到 elementUI 所有组件，所以这里我们还是按需引入组件处理。首先，安装 Vite 提取公共依赖的插件 vite-plugin-externals
接着修改 vite 配置文件，把 Vue 作为外部依赖
后续的步骤跟前文接近，我们继续执行构建命令，然后开启预览
回到 iofod 编辑器，继续添加外部组件，添加 Vue 和 element UI公共样式为外部依赖（同样地，可以用打包出来的 style.css 代替公共样式，取决于实际场景需要），根据打包出来的文件结构设定 entry 模型变量，即可看到导入效果
搞定！想撸一遍的小伙伴可查看【示例项目】。
以上内容的全部工程代码可前往 Github 获取~
四、跑起来！（可选）
我们以刚才的公开项目示范，在本地跑起来！如果还没安装 iofod-cli 工具，根据文档安装
新建一个项目，步骤与前文类似，安装依赖，拉取项目配置生成工程代码，开启本地调试即可查看效果
导入外部组件的所有步骤到此为止，读者跟着操作一步一步来即可完成目标。
外部组件与原子组件差异化最大的地方在于跨平台性，外部组件一般是在 Web 端运行的，不兼容小程序（除非所导入组件本身是支持的），flutter 则通过用 webview 的形式来兼容，一个外部组件就是一个 webview。一个外部组件就是一个 webview？ 嘿嘿，机灵的读者朋友想必清楚个中意味，这里就不细说了，但我还要通过一个小小的案例演示下。
比如我们通过 Echart Kit 拓展，添加一个三维·折线图·正交投影的图表到可视化编辑区
然后通过 iofod-cli 创建一个 flutter 模板项目，进入工程目录，执行 cli 命令监听 5200 端口
借助 IFstruct 同步拓展和 IFstruct 解析器生成 flutter 代码，在安卓/iOS模拟器上开启调试，效果如下：
打完收工，外部组件还有更多的应用场景，留给大家自行尝试。
结语
再次强调一遍，外部组件可以是任意前端组件，甚至可以是一个应用！没有任何技术栈或者框架的限制！
iofod 作为新兴的通用低代码平台，当前社区组件资产的沉淀不算多，在社区完全成熟前，外部组件的引入可以作为一个很好的过渡方案，同时也是复用现有社区资产的解决方案。
如前文提到的 Echart Kit 就是基于外部组件复用现有组件资产的最佳案例，当这些工具链串联起来（文明版的 Ctrl+C & Ctrl+V :），生产力超越传统编程是很显然的事情。
如果使用过程有任何问题，可以公众号搜索【iofod】或【数字围猎】，点【联系我们】可在线提问，或者添加小助手微信：zxu1002- 进群交流。
相关链接：
