本文源自 https://blog.jetbrains.com/webstorm/2016/05/getting-started-with-electron-in-webstorm/

Posted on May 18, 2016 by Ekaterina Prigara

Electron 允許你僅採用JavaScriptHTML 和 CSS (或ECMAScript 6、TypeScript、CoffeeScript 或任何和JavaScript相容的語言)建立跨平台的應用程式. 其提供很多原生的OS API 的元件如OS通知或自動更新等功能.  

有許多採用 Electron 的有名應用程式, 例如 Slack 和 Atom, 也有蠻多建於Electron上的 開源的應用程式 , 你可從中學習.

讓我們來看看於WebStorm上可如何設定來實作Electron應用程式的工作流程:如何啟動編碼助理與執行Electron應用程式的除錯.  

設定程式碼完成(code completion)

要為你的專案啟動Electron API的編碼助理, 你只需要把github-electron.d.ts 加為一個JavaScript library. 請到 Preferences | Languages and Frameworks | JavaScript | Libraries, 點選 Add…, 尋找 github-electron 並下載.

下載的TypeScript定義檔包含所有 Electron APIs 的敘述. WebStorm用此來提供程式碼完成(code completion), 相關method參數和紀錄的資訊. 

electron-doc.png

如果想要有Node.js的程式碼完成(code completion), 請到 Preferences | Languages and Frameworks | Node.js  和 nam 並 點選 ‘Enable coding assistance’.

執行(run)並除錯(debug) Electron 應用程式

於 Electron, 有2 類型的程序(process) : 主要的程序 , 此管理應用程式的主要網頁並處理系統事件,與描繪(render)過程, 此和應用程式的每一個別的網頁相關並主導大多的應用邏輯.  

執行(run)並除錯(debug)這主要的程序. 

如果你想了解應用程式開始的時候會發生什麼事, 你要除錯(debug)主要的程序.  

新增 Node.js 執行(run)/除錯(debug) 設置, 並指定 在Node.js 直譯器欄位 Electron executable的路徑 以及 應用程式主要的JavaScript檔案的路徑.  如此就完成了! 

將設置儲存下來, 設好多個斷點(breakpoints)再按除錯Debug(除錯).  或 按執行Run(執行) 就可簡單開始應用程式. 

debugging-main-process

從命令列你會用Electron executable來開始你的Electron應用程式

如果你已在地安裝Electron (the electron-prebuilt package), 它應該位於你專案 node_modules under .bin 的檔案夾. 於OS X 和 Linux 的話就應該是 electron, 在 Windows 的話就會是 electron.cmd.  你也可自訂整體的Electron安裝路徑. 

你需要在JavaScript檔案欄位指定的路徑是app startup file 的路徑- 與你在package.json 的主要欄位相同.

除錯封裝應用程式

你也可除錯封裝的Electron應用程式 – 只要確定建置的應用程式裡, 在Node.js 執行(run)/除錯(debug)設定你有指定好Electron的路徑. 例如, 一個建置的OS X 應用程式, 這路徑將會是your_app.app/Contents/MacOS/your_app; 一個建置的Windows應用程式, 路徑則是your_app-win32-x64/your_app.exe.

除錯描繪程序(render process)

在WebStorm上要除錯應用程式的描繪程序(render process), 首先請從additional option –remote-debugging-port=9222 (請隨意選擇任何port) 開始此應用程式. 

你或許可在之前所建的主要程序的Node.js設置加入這選項於應用參數欄位, 且用此開始應用程式, 或由此選項的命令列來執行此應用程式.

main-process-with-debugging-port

一旦執行應用程式, 在port 9222開一個新的 Chromium 遠端 執行(run)/除錯(debug) 設置, 以附加到交付程序(render process). 

debugging-render-process

你也可為此兩個設置開始除錯工作階段(sessions).  在此案例這些斷點(breakpoints)將會打在描繪(render)與主要兩種程序上. 

除錯TypeScript Electron 應用程式

如果你寫應用程式採用的是 TypeScript (或任何可編譯到 JavaScript的語言) 並想除錯的話, 確定編譯器會產生程式碼地圖. 例如, 以TypeScript來說, 加“inlineSources": true, “sourceMap": true in the project tsconfig.json 檔.

– JetBrains WebStorm Team

f9aa325d3aed8e6e58ddb62a4749282f

關於Ekaterina Prigara

Ekaterina Prigara是JetBrains的WebStorm 產品行銷經理. 她熱衷於科技, UX與咖啡. 

ESAST CO LTD為JetBrains在台灣經銷, 本文經JetBrains授權翻譯

下載或購買WebStorm

將很感謝您的分享!

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

分類

03-JetBrains