浅谈在线编辑器中增量编译技术的应用

Lightly 是 TeamCode 团队开发的一款轻量且功能强大的集成开发工具。目前已支持C、C++、Java、Python、HTML+JS+CSS、PHP、Go项目。除语法高亮、语法错误自动检测、代码智能提示和自动补全等基础功能外，它还可以自动构建开发环境，云端存储所有代码和资源，支持项目的多用户协作开发。此文介绍增量编译技术在 Lightly IDE 的应用，方便大家更好地了解和使用产品。

背景

在产品研发周期中，编写代码、编译、调试占据了工程师们绝大部分的时间，在默认情况下，更新小部分的代码，就需要触发一次全量编译，这个过程耗时大概为分钟级别，导致每次调试的反馈周期会相对较长，影响开发效率。为了解决这个问题，Lightly 团队进行了很多探索与尝试，引进了增量编译技术，旨在缩短编译时间，提升开发效率。

架构设计

鉴于 Lightly 是一支持全语言的在线编辑器（IDE），我们认为设计一个增量编译系统需满足以下条件：

• 通用性 : 能够接受各类文件类型的源代码变更，并进行结构化处理
• 扩展性 : 能够适配不同语言，不同框架，进行针对性的编译和构建

为满足以上条件，我们将增量编译系统设计为以下模块：

如上图所示，在线编辑器系统整体分成3个部分：

• 监听模块 : 负责监听源程序中文件的变化，新增、修改、删除、重命名等。
• 消息模块 : 负责将变更的内容结构化为消息，并根据已知类型进行分类打标，作为下游编译模块消费时的依据，同时，消息系统作为传输队列，本身需要具备持久化的特性。
• 编译模块 : 该模块由各类具体的语言模块构成，通过消息系统的数据作为输入，将变更的内容做针对性的编译和构建，输出产出物。

下面是整体运行的流程图，描述了从代码修改到完成编译的整个过程：

以 Java 工程为例，从整个流程出发，在线编辑器的内部流程如下：

• 监听到 Java 源代码变化之后，首先我们会将这个变化的文件打标，放入消息队列
• 将文件编译所依赖的信息进行收集，包含 maven 所有依赖的路径，以及相关环境变量和运行时参数
• 将变更的文件进行编译，得到产出物，即 class 文件

运行编译产出物

由于我们把需要的文件已经编译完成，那接下来只需要将制品加载即可看到最终效果：

Lightly使用体验

前面的部分详细描述了增量编译的具体实现，其中包含了很多复杂流程和内容，但是对用户来说，使用过程是透明的，我们在 Lightly 在线编辑器上只需要一键触发就可以在1秒内完成整个编译打包、运行流程，优化了原先 “修改代码、运行构建命令、启动” 的流程，具体介绍如下（以 Java 为例）

1. 用户编码完之后, 只需点击右上角 RUN 按钮, 即可查看输出：

2. 用户再次编码完之后，再次点击右上角 RUN 按钮，结果如下：

展望

未来，Lightly 团队将继续围绕更智能化的轻量级在线编辑器（IDE）迭代更多功能，为开发者带来更好的体验，并期待后续更多的开发者可以参与共建。