开源Web IDE项目 codesandbox 源码解读（1）

概述

最近在做一个开源的Web IDE项目，阅读了很多源码，为了更方便地使用一些开源模块，把项目从vue转到了react，很多地方来回来去写了好几版。
我个人非常喜欢在线的IDE，它们无需下载，即开即用，功能堪比离线IDE，而且非常符合万物皆可Web的想法，这令我非常激动，也是我想要着手写一个自己的Web IDE的原因。
现在网上有非常非常多的Web IDE，如
js项目可以使用的
js fiddle
codepen
cloud studio
stackblitz
codesandbox
snack
plunker

多语言高亮的编辑器
gitlab Web IDE
jupyter

Web IDE被用于多个领域
包括
python量化交易的vnpy
在线的编程教学如菜鸟教程
等等

还有photoshop的网页版photopea
Arduino, Mbed的在线IDE

有人说，2019的前端热点之一是Web IDE

无疑, 随着网络通信的发展, Web IDE将在云端世界谱写自己的篇章

感谢感谢伟大的开源社区，了不起的大牛们把价值百万以上的项目开源出来，极大地降低了个人开发一款功能较为完善的Web IDE的难度。

在尝试开发的过程中，我找到了以下三个开源项目作为参考
codesandbox（react，js+ts）
snack（react, ts）
plunker（angular, ts）

其中，codesandbox是最庞大最复杂的项目，由Ives van Hoorne，一个仅22岁的大学生开发，有150多个contributer，优质的代码和纷繁却有序的项目结构让我在阅读过程中有醍醐灌顶的感觉，作者的身份经历也给我很多鼓励。

但是，由于codesandbox这个项目过于庞大，光是配置环境对没有完整地实现过一个工程化前端开发的我来说就已经是一件非常复杂的事情了，很多时候作者用巧妙的方法实现的功能，我钻牛角尖地研究，会卡住好几天，所以这让我产生了写下这篇或（不三分钟热度的话）系列的想法，记录下我在阅读codesandbox的前端代码并尝试实现自己的IDE时遇到的问题和答案。