| 作者: 京东金融-移动研发部-前端开发工程师 刘麒麟
前 言
记得以前有人和笔者说过这么一个观点，“前端工程化的下一站是一个团队级的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/CodeMirror web IDE编辑器组件，支持个类型代码高亮
-
react-ui-tree https://github.com/pqx/react-ui-tree 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/electron-packager 来进行打包。api里面有各种配置，基本满足你所有的需求。
-
加密，当然是asar啰，这个没什么技巧，看看官网就行了，一个命令的事儿啦。
结束语
如果说全文是个论述题的话，笔者在这里还得加一句：“综上所述，开发一款IDE就像做道菜一样简单”。以上只是开发出来一款IDE的一个入门而已，意在激发一些好奇和探索的种子，读者有心都可以去尝试尝试。写出一款自己的IDE打上自己的tag也是一件蛮有趣的事情。而当好奇尝试的成果，经过反复打磨，逐渐变成一件工程化的产品的时候，那它更会变成一件很有意义的事情。
..........
苹果耍[流氓]啦～要对赞赏收30%过路费
以下是IOS用户专用赞赏通道～
感谢您的支持，我们会继续努力!
..........
