Electron 是一套建基以 Node.js 作back-end 和 Chromium 作front-end 的軟件框架. 最大的好處是可以利用JavaScript 建立Desktop Application, 同時亦可以利用npm 大量的 repository. 網上的教學主要都集中在如何利用Visual Studio Code 那邊. 但其實Visual Studio 2017 都可以做到.方法如下:
- 確定自己有安裝Node.js, 沒有的話, 請到 https://nodejs.org/en/ 下載及安裝.
- 建立Node.js project.
開啟 Visual Studio > File > New Project, 於 JavaScript 中選取Blank Node.js Console Application, 並輸入Project name 後按OK.
- 開啟npm package manager.
於 Solution Explorer 中選取 npm, 按右鍵開啟 Install New npm Packages.
- 安裝Electron.
於 text box 輸入Electron, 然後於下邊的list box 選取electron, 之後按Install Package.
- 從Github 下載Sample code. 並加到Project 中.
- 設定stratup file.
於 Solution Explorer 中選取 main.js, 按右鍵並選取 Set as Node.js Startup File.
- 設定Project property.
於Project Property 中, 進行以下設定:Property Value Remarks Node.exe path %Project_Path%\node_modules\electron\dist\electron.exe 執行時叫用electron.exe Node.exe option –inspect-brk 使debugger 可以辯認break point. - 進行測式.
按F5 執行project, 正常會彈出Console, 將顯示的URL 複制.
- 開啟 Desktop Application.
於瀏覽器中開啟URL, 會彈出application.
參考資料
- Electron Quick Start, Electron, Github,
https://github.com/electron/electron-quick-start - Creating an Electron app using Visual Studio (not VSCode) w/ Node.js tools,
StackOverflow,https://stackoverflow.com/questions/35416172/creating-an-electron-app-using-visual-studio-not-vscode-w-node-js-tools
Leave a Reply