[前端工坊]开发一款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也是一件蛮有趣的事情。而当好奇尝试的成果，通过反复打磨，逐渐变成一件工程化的产品的时候，那它更会变成一件颇有意义的事情。