利用網頁技術實作 iOS 風格的計算機,支援鍵盤輸入。
- React:網頁框架,方便使用重複的 component、hooks 進行開發。
- Redux:用來狀態管理,並且將核心計算邏輯放在 reducer 方便往後進行 unit test。
- Jest:針對 reducer 進後核心邏輯的單元測試。
- Workbox:提供多種 cache strategies 提升效能,並讓 web app 可以 offline 使用。
- Big.js:算錢用浮點,持早被人扁。這個套件協助我們用 javascript 所沒有的 decimal 來處理小數點、大數字運算。
npm install
:安裝 dependencies。npm start
:在 http://localhost:3000 使用 hot reload 開發。npm format
:使用 Prettier 確保程式碼風格符合規範。npm run lint
:使用 ESLint 確保程式碼風格符合規範。npm run build
:建置 production 專案。npm run serve
:透過 http://localhost:7000 檢驗 production build 結果。
- 執行
npm run install
安裝 dependencies。 - 開啟 branch 進行開發,branch 名稱使用
build|ci|docs|feat|fix|perf|refactor|test
開頭並加上斜線/
,例如:feat/add-keyboard-shortcut
。 - 修改程式並 commit,commit message 遵守 Angular Convention,經修改的程式碼會透過 lint-staged + husky 進行 lint、測試。
- Push 至 Github,手動發起 pull request。
- 自動觸發 Github Actions 的 test job,運行腳本確認程式碼品質、Deploy Previews 正常後,手動 merge 進 master branch。
- 自動觸發 Netlify build & deploy 部署至 https://galtz-web-calculator.netlify.app。
Depfu 會在 npm packages 有新版本時發出 PR 且列出 changelog,方便我們進行例行性套件升級。
建置 Docker image:
./scripts/build.sh
運行 Docker container,接著透過 http://localhost:8080 看到 web calculator。
./scripts/up.sh