在线IDE开发入门之从零实现一个在线代码编辑器

前言

3年前在AWS re:Invent 大会上AWS 宣布推出 Cloud9, 用于在云端编写、运行和调试代码，它可以直接运行在浏览器中，也就是传说中的 Web IDE。3年后的今天随着国内云计算的发展, 各大云计算服务厂商都在部署自己的WEB IDE, 而且已经有非常成熟的落地方案, 对于这一块的技术原理和实现, 也非常值得我们去学习和剖析.

目前比较成熟的WEB IDE方案有CodeSandbox, Cloud Studio等, 接下来笔者将实现一个简单的WEB IDE, 来带大家了解其原理和实现过程.

正文

笔者接下来会介绍WEB IDE的实现原理和应用场景, 并介绍如何在H5-Dooring中使用它.

1. web编辑器实现原理

我们先来看看一个成熟WEB IDE的结构:

抽象出来可以分为3个核心部分:

• 文件导航区

• 代码编辑区

• 预览容器

如下图所示:

在把模块抽象出来之后我们来思考具体的功能实现. 对于文件导航区我们可以很容易的使用react/vue的ui库来实现, 对于文件保存, 目录树生成等我们可以使用nodejs + DB(如mysql,Redis)来实现. 代码编辑区我们可以用第三方成熟的库比如react-codemirror2 或者react-monaco-editor来做. 由于预览容器我们不清楚预览类型(如小程序, web页面还是app), 所以这里我们暂时考虑web页面容器, 也就是我们比较熟悉的iframe. 那么我们可以画出如下技术实现图:

实际上WEB IED实现过程远比上面的复杂, 我们这里只做简单的抽象. 我们接下来梳理一下在线代码编辑器的需求：

• 支持在线编写前端代码（html，javascript，css）

• 支持实时预览

• 支持代码在线下载

1.1 技术选型

在了解了以上实现方式之后, 我们开始来搭建环境并进行代码开发. 以下列举我们的技术选型：

• koa 基于nodejs的服务端框架

• koa-static 基于koa的静态资源中间件

• koa-body 解析请求体的中间件

• koa2-cors 处理跨域的中间件

• koa-logger 处理请求日志的中间件

• react 前端框架

• react-codemirror2 代码编辑器

• antd 基于react的前端组件库

以下是笔者实现的效果图：

1.2 实现细节

对于以上笔者列出的koa和react的技术方案不