node.js + Firebase + TypeScript 環境建置
新建 Git + node.js + Firebase + TypeScript 專案
youtube, ref
以下所有操作都位於專案資料夾下。
Step 1: (Optional) Git
請先確認安裝好 git
,在終端機輸入 git
能正確識別,並建立好 Github 帳號。
Step 2: node.js
請先確認安裝好 node.js
,在終端機輸入 npm
和 npx
都能正確識別。
- 初始化專案資料夾
- (Optional, 搭配 Firebase) 安裝 firebase 套件
Step 3: Firebase
請先確認完成 node.js
的設定。
- 確認已經申請並設定好遠端 Firebase
- 建議都啟用開發模式
- 可比如啟用以下功能
- Authentication, 並啟用以 Google 帳號登錄
- Realtime Hosting
- Storage
- 本地操作
- 登入 Firebase
會透過瀏覽器登入驗證,若很久以前登入過且過很久,建議改用以下指令。
- 初始化 Firebase 專案
依照提示以空白鍵勾選設定遠端時啟用的功能,並設定專案細節。建議設定:
- 若有使用 Realtime Hosting,則依照預設使用
database.rules.json
作為管理資料庫的設定檔
- 多頁網站 (非 single page)
- 不要初始化 git
- 部署 Firebase
此時會提示 Firebase 部署到的網站連結,可使用瀏覽器開啟該連結並確認結果。
Step 4: TypeScript
請下載 TypeScript 編譯器,確認在終端機輸入 npx
和 tsc
都可被正確識別。
- 初始化 TypeScript 專案
- 調整生成的
tsconfig.json
,比如調整
rootDir
決定來源的 .ts
放在哪
outDir
決定生成的 .js
要放在哪
- 編譯
設定好 tsconfig.json
後,編譯僅需簡單三字。