编者按：本文为《Cube 技能解读》系列第七篇文章，作者是蚂蚁集团客户端工程师佳佑，带大家了解 Cube 卡片东西 ACT 的规划思路与演进进程。
✍ Cube 技能解读系列文章：
第一篇：支付宝新一代动态化技能架构与选型综述
第二篇：Cube 卡片技能栈详解
第三篇：Cube 小程序技能详解
第四篇：Cube 渲染规划的前世今生
第五篇：文本布局功能提高 60%，Inline Text 技能原理与完成
第六篇：大屏小程序探究实践
一直以来移动端技能生态中的动态化技能都是职业界的话题热门，各类使用框架也层出不穷（RN、Weex、Flutter），支付宝客户端也在事务旺盛的高功能、易投进诉求中逐渐沉淀下了一套自研解决方案–Cube 卡片。
在移动端动态化使用场景中，怎样才能解放 DSL 领域内描绘言语的高效生产力？怎样才能有用的降低传统移动端 Native 研制的调试本钱？怎样才能恰当的整合职业界各类优异解决方案与东西？
带着对这些问题的考虑，支付宝 Cube 团队在卡片事务中摸索沉淀了衔接开发 DSL 与引擎运转时的根底配套东西–Ant Cube Tool（简称 ACT）。这篇文章将测验带着大家了解 Cube 卡片东西 ACT 的规划思路与演进进程。
技能选型
CLI
Cube 卡片的动态化方案首要是根据 JS 桥接技能，DSL 选用的是 HTML + JS + CSS 近前端技能栈的格局，行文写法上学习了 Vue 单模板格局。职业中前端生态内东西广泛选用的是根据 Node 环境的 CLI 方法，考虑到这种 CLI 方法简便、灵敏、易于维护，Node 生态丰厚的社区资源，再加上 Node 天然的跨平台特性，Cube 卡片的根底生产东西也决定使用 Node CLI 技能栈进行建设。
IDE vs CLI
随着 Cube 卡片在事务场景中的逐渐敞开，越来越多具有不同技能布景（前端、Native）的开发同学开始使用 Cube 卡片东西进行迭代研制。尽管 CLI 能够满足根本的日常开发调试诉求，但相较于传统 IDE 形式，可交互的手法（快捷键、按钮、菜单等）以及信息回馈的方法（弹窗提醒、编辑器联动、状况告诉等）就会变得无能为力；但是建立一个功能齐备、灵敏牢靠、开箱即用的卡片桌面 IDE，不可避免的需求投入很多的研制、维护本钱。得益于职业界盛行的编码东西 VSCode 供给了较为完善、丰厚的插件扩展才能，咱们将 VSCode 插件作为 CLI 的辅助东西，补充了根据 VSCode 环境的便捷交互方法，在 IDE 与 CLI、研制投入与体验产出之间寻求到了平衡。
框架规划
ACT 作为 Cube 卡片最根底的辅助东西，承载着卡片在生产阶段最中心的研制诉求：编译、预览、调试，操作链路上需求连通源码编辑器、构建底层、设备运转时各个环节，咱们选用的是根据 CS 形式的数据通信机制，中心才能将封装在 ACT 本地服务器中，由服务器供给 REST 响应接口，供桌面编码环境、设备运转环境、Web 调试环境调用。一起本地服务器中也敞开了 WebSocket 衔接才能，在链路节点间供给音讯推送的功能，保证节点间状况同步的及时性。
有别于传统 Native 单台设备的联调体验，在 CS 形式下，ACT 能够很便利的完成多台不同平台、不同装备的设备一起进行卡片预览、调试，这对在开发阶段及时验证卡片作用跨平台的一致性将很有帮助。值得一提的是，在同一局域网环境下，Client 与 Server 的衔接拜访其实并没有地理位置的限制，这也使得咱们在开发卡片时能够将本地的作用、信息投递给远程协作的其他同事，提高协作研制的效率；同样的，也能够便利的在云端设备平台环境中选择适宜的固件设备进行远程衔接，降低了不同运转环境兼容性验证的操作本钱。
中心功能
ACT 最首要的职能便是将事务开发时供给的模板信息（卡片 DSL）转换为运转时可被处理的 Dom 数据元、Css 款式集以及 JS 逻辑段，这个过程咱们一般称之为编译。在取得编译产品之后，ACT 会持续向引擎运转时投递产品成果，并借助内置于运转时的 Playground 模块，为事务卡片供给真机作用预览才能。一起，经过 ACT 内置的 Devtool 使用，为正在预览的卡片附加 Element 节点、Style 款式以及 JS 断点调试才能。
工程
卡片的源码工程首要由工程装备、卡片装备、卡片模板三部分构成。其间工程装备（.act.config.json 文件）首要声明晰预览形式、源码途径等根本信息；卡片装备（manifest.json 文件）包含了编译形式、产品类型、引擎装备、组件声明等信息；卡片模板（main.vue 文件）则涵盖了一个卡片最根底的布局、款式、逻辑等部分。
➜ Card tree -a
.
├── .act.config.json
├── main.vue
└── manifest.json
编译
在卡片的 DSL 描绘格局中，一个根本的卡片首要包含布局结构（
