[前端工坊]開發一款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也是一件蠻有趣的事情。而當好奇嘗試的成果，通過反覆打磨，逐漸變成一件工程化的產品的時候，那它更會變成一件頗有意義的事情。