參考 Electron Course - Code Desktop Applications (inc. React and Typescript)
建一個資料夾,並進入資料夾路徑
create vite project
所有檔案會出現長這樣
安裝package.json的東西
就會出現 node_modules,裡面就會一堆 dependencies,到這部就算是初步完成project的建置
檢查是否可以跑出預設的介面
存放 code 的 src/
中新增一個 ui/
資料夾
把預設的的檔案都放到 ui/
底下
設定 ui 的 javascript 路徑,因為他剛剛被我移到 ui/
底下了
測試一下目前做的對不對
把 vite
的 icon圖片svg 還有不用的東西刪掉
設定 包裝完的程式 要放哪個路徑
dist/
底下
vite.config.ts
中設定 output 的路徑dist-react/
中了,這時候 dist/
就可以刪掉了
.gitignore
,這樣他就不會被 push 上去了安裝 electron
在 src/
底下創建 electron/
,並新增 main.js
main.js
: 控制 electron 的介面,叫他載入 dist-react/index.html
在 package.json
設定主要程式進入點,以及react和electron的執行腳本
到 vite.config.ts
中設定路徑
加上 相對路徑的符號 ./
否則build出來會長這樣,這樣會找不到檔案
開始跑 electron 應用程式
刪先看到這三個檔案
tsconfig.json
:全局的配置。tsconfig.app.json
:前端的配置(React 项目)。tsconfig.node.json
:後端的配置(Node.js 或 Electron)。
在全局的 tsconfig.json
中指定 包含和不包含設定涵蓋的範圍
在 electron/
底下新增 tsconfig.json
,並把 main.js
改名為 main.ts
在 electron/tsconfig.json
中
在 package.json
加入 electron/tsconfig.json
編譯
執行 build
,就會看到build完的東西跑到 dist-electron/
底下了
package.json
設定程式進入點為 electron/main
,因為我們是要跑 electron 而不是 react
測試能不能跑
應該要是依樣長這樣喔
最後,記得加到 .gitignore
,設定TypeScript到這就結束了
安裝 electron-builder
設定要件成怎樣的 執行檔
創建 electron-builder.json
在 electron-builder.json
設定不同平台要創建的執行檔格式,icon
的部分隨便,沒有設定應該就是預設的 icon
在 package.json
中設定生成執行檔的腳本
看你用啥 OS,就執行哪個,阿我是 windows
到產生執行檔的路徑 dist/
長這樣就代表build的功能設定完成了!
安裝 corss-env
到 package.json
設定辨別現在的模式是 development 在執行 electron
上面是OS 知道現在啥情況,但是程式碼並不知道,所以現在要寫一個程式來判斷現在是開發模式還是啥
src/electron/
底下創建一個 util.ts
isDev()
在 vite.config.ts
設定 react 要跑在哪個 port,port
那個就看你自己可以隨便定
先測試 react 是不是跑在 port 上
水 :laughing:
對於 electron 到底要載哪個,介面也要設定,到 src/electron/main.ts
開始測試
要開兩個 terminal,順序沒差,如果沒開react server的話electron就開不了喔
為了不用每次都要開兩個 terminal
安裝 npm-run-all
package.json
修改執行腳本
這樣之後開發就只要跑一行就行
vite
支持 HMR,所以就一邊改程式,畫面也會跟著變
可以開始開發app了!