在线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的结构:
2017年nba选秀抽象出来可以分为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的技术⽅案不熟悉的⼤家可以先了解⼀下，笔者这⾥直接实现具体逻辑。
我们先⽤umi来创建⼯程，然后在根⽬录新建rver.js⽂件。该⽂件主要⽤来处理nodejs相关逻辑，在稍后我会详细介绍。界⾯的实现笔者不⼀⼀介绍了，前端模块笔者来介绍⼀下如何配置代码编辑器。react-codemirror2基本使⽤⽅式如下：
import {UnControlled as CodeMirror} from 'react-codemirror2';
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
export default function() {
// ...
return (
<CodeMirror
className={deWrap}
value={html}
蚂蚁喜欢吃什么
options={{
mode: 'xml',
theme: 'material',
lineNumbers: true
}}
onChange={handleChange}
天雅地毯
cursor={cursor}
onCursor={onCursorChange}
/
>
);
}
复制代码
通过以上⽅式我们就能⽣成⼀个基本的代码编辑器，需要注意的是我们需要再单独引⼊对应的主题样式⽂件：
@import '~codemirror/lib/codemirror.css';
@import '~codemirror/theme/material.css';
复制代码
为了实现预览功能，笔者之前想了两种⽅案，⼀种是直接通过页⾯组件的⽅式来实现预览，但是缺点是只有dom和样式更新能⽣效，如果编写js代码，由于react的内部机制是⽆法直接执⾏script的。
另⼀种⽅案是iframe，这种⽅案可以很好的隔离react和预览代码，实现机制如下：
也就是说我们在代码编辑器⾥编辑完代码之后统⼀通过请求的⽅式保存在node端，然后通过iframe请求nodejs渲染的静态页⾯来实现预览功能。有点类似服务端渲染的感觉。
那么如何保证实时预览呢？这块完全可以设计成⽤户⼿动点击预览，也是笔者最初的设想，但是为了增强⽤户体验，笔者决定采⽤实时预览， 也就是⽤户代码的变化可以实时反应在“预览窗⼝”。⽅案就
是在onChange中更新state来实现rerender，这⼀点⽤react hooks很好实现。但是实时更新对性能很不友好， 所以为了提⾼预览性能和页⾯体验，笔者在这⾥使⽤防抖来控制请求频次和时机。代码如下：
const handleChange = (editor, data, value) => {
fetchPage(value)
}
const fetchPage = (v) => {
if(timer) clearTimeout(timer);
timer = tTimeout(() => {
fetch('localhost:80/dooring/render', {method: 'POST', body: v}).then(res => {
html = v
tUpdate(prev => !prev)
});
}, 1000);
}
复制代码
在开发中还遇到同⼀个问题就是iframe每刷新⼀次，代码编辑器的光标都会被重置，这⼀点对⽤户在线coding的体验⾮常不好，所以笔者⼜看了⼀遍官⽅⽂档，找到了cursor这个有意思的api，中⽂的意思就是说可以⼿动设置光标停⽌的位置，那么我们在每次光标变化的时候都强制设置为当前光标所在的位置，那么就不会应为iframe刷新的影响⽽被迫触发失焦动作了。代码实现如下：
