[前端工坊]开发一款IDE就像做道菜一样简单

文章来自微信公众号：前端工坊(fe_workshop)，不定期更新有趣、好玩的前端相关原创技术文章。如果喜欢，请关注公众号：前端工坊
版权归公众号所有，未经允许，不得转发。

---

前 言

记得以前有人和笔者说过这么一个观点，“前端工程化的下一站是一个团队级的IDE”。当时不明觉厉，现在细思极恐。比如，我们能把开发用的脚手架，模版工程打包进去做到团队技术栈统一。我们能把上线系统，测试bug反馈系统集成进去实现全方位服务。等等。后来会发现，一个团队级的IDE是能真正把大家的工作全部打包进去。这是一个好大好大的话题。

但是今天笔者不准备扯画饼的东西，还是来点实在的。说说如何开发一款自己团队的IDE，为此笔者还起了一个响亮的名字 - “开发一款IDE就像做道菜一样简单”。

正 文

我把做菜分成“菜系”、“主材”、“烹饪”和“摆盘”四大环节，关于IDE的开发，也打算从这四个流程节点切入，来讲讲每个环节的故事。

菜系 - 功能点收集

"定菜系"是做菜的第一步，我们首先要规划好我们这个IDE需要具备哪些能力，也就是说，我们想做的是哪一道“菜”。那我们团队为例，最初就是为了搞一个方便开发RN三端应用并能集成模拟和打包功能的一款IDE。因此笔者在开发的时候大致列举了如下功能点：

• 代码编辑系统 （包括加载目录树、一个编辑器来承载代码的增删改查）
• 模拟器 （在osx下需要调用苹果设备的模拟器打开app，渲染开发的页面）
• 编译（编译RN代码成开发或者发布版本）
• 控制台 （观察代码编译日志和模拟器运行日志等）

关于功能点收集这块因团队而异，每个团队开发IDE的出发点不一样，所以前期需求一定也不同。

选材 - 框架和仓库选型

“选材”这是一个至关重要的环节，我们需要找到实现一款IDE所需要的所有技术承载。

首先便是框架
我们是前端工程师，js是我们的主武器。要开发类似于IDE这样的PC原生应用，那么第一个技术点就是要找到一款跨平台的壳工程。最终我们确定选用基 Eletron https://electron.atom.io/ 的壳工程来开发。关于electron的详细内容，读者可以看看其官网。歪果仁写的官网你懂的，还是相当通俗好懂易上手的。

下图就简单的列举一下此框架的优势：

分工
工程项目涉及到用户的可视化操作界面、文件读写操作、系统应用调用、网络调用等。electron提供了主进程和render进程的通用的规划建议，但是对于底层操作的所有逻辑不要全部往主进程里面扔。因为electron框架是有nodejs运行环境的，所以，我们可以起新的node子进程去执行一些独立的大功能。
对于我们的项目来说，我是这么分工的：

工程
开发分render进程的web应用，app主进程以及其它子进程的功能应用。
因此：

• render进程，即web应用，使用 react+redux+middleware 的框架，以及webpack脚手架构建工程。
• app主进程用electron 命令起启动工程
• node子进程用nodemon启服务

这里推荐一些无论哪种“菜系”的IDE都会用到的一些render进程里面的基础组件：

• codemirror https://github.com/codemirror... web
  IDE编辑器组件，支持个类型代码高亮
• react-ui-tree https://github.com/pqx/react-... web文件树组件
• UI框架material-u http://www.material-ui.com/#/ web ui框架

“烹饪” - 逻辑研发过程中遇到的一些技术点

“烹饪”环节到了，有了前期好的选材设计，到了研发环节也就是水到渠成的事儿了，在这个环节，主要就是集中解决一些实现上的难点以及注意一些细节上的技巧。下面就列举一下笔者那款IDE在开发过程中的一些经验。其中共性的东西应该就是所谓的通信问题了。

通信问题
上述架构设计各种不同的通信机制

• 主进程app和render进程之间的通信：Electron自有通信机制分别封装在ipcRender和ipcMain中，相关细节可以查看官网文档。
• render进程中，ipcRender监听回调和redux的reducer绑定：即在createStore之后增加绑定流程。具体关键代码如下:

• 主进程和其他子进程之间的通信：和普通nodejs进程间通信是一样的。

文件树过大
在运行是常常会遇到文件树过大的问题，比如在load文件夹的时候往往会带有node_module子文件夹。这样如果直接load就会使得IDE崩溃，因此需要额外处理。

• 分级加载，用户的每次操作只新增一级文件夹的load和渲染操作。
• 每级文件夹设置最大渲染文件数。

“摆盘” - 打包和发布

“摆盘”是最终环节，也是得到最终“菜品”的时刻了。这个环节可讲的不太多，也就是涉及两块，一个是打包，一个是加密。

• 打包 : electron自带打包的方法。官方推荐了好几种，还有一种是带安装程序的。这里推荐自行调用npm库electron-packager https://www.npmjs.com/package...
  来进行打包。api里面有各种配置，基本满足你所有的需求。
• 加密，当然是asar啰，这个没什么技巧，看看官网就行了，一个命令的事儿啦。

结束语

如果说全文是个论述题的话，笔者在这里还得加一句：“综上所述，开发一款IDE就像做道菜一样简单”。以上只是开发出来一款IDE的一个入门而已，意在激发一些好奇和探索的种子，读者有心都可以去尝试尝试。写出一款自己的IDE打上自己的tag也是一件蛮有趣的事情。而当好奇尝试的成果，经过反复打磨，逐渐变成一件工程化的产品的时候，那它更会变成一件很有意义的事情。