# Node.js 專案架構
Elantris

[TOC]

---

## 前言
專案架構指的是一個專案內各個檔案放置的位置與命名規範，原則上相同性質的檔案會放在同一個資料夾。

## Root 根目錄
一個專案的根目錄第一層通常會放說明文件以及各種工具的設定檔：

- `README.md`：說明文件，包含專案內容、安裝步驟、如何參與貢獻等簡要說明
- `package.json`：NPM 設定檔，定義指令與相依套件，有些工具的設定檔也支援放在這個檔案裡
- `.gitinore`：設定不加入 git 追蹤的檔案
- `.eslintrc`：eslint 規則設定檔
- `.prettierrc`：prettier 規則設定檔
- `tconfig.json`：typescript compiler 設定檔
- `LICENSE`：授權條款

會放在第一層的資料夾通常範疇比較廣：

- `public` / `static`：不需要編譯直接存取的靜態檔案
- `src` / `source`：需要編譯的程式碼
- `build` / `out` / `dist`：編譯後的檔案
- `tmp`：開發時偶爾需要測一些小功能，記得加進 .gitignore 不要讓它放到 git 上
- `test`：自動化測試用的腳本

## Source 原始碼
根據不同的專案類型原始碼的資料夾結構也有所不同，盡量把相同性質或類似功能的程式碼放在一起，讓開發者撰寫時不用找太久。

### React
使用靜態

- `src`
- `components`：會用在不同頁面的元件
- `common`：通用元件、雜項
- `Navbar.tsx`
- `SocialLinkButton.tsx`
- `input`：表單元件
- `IntegerInput.tsx`
- `ColorPicker.tsx`
- `[feature]`：特定功能相關的元件可以獨立成一個資料夾作管理
- `contexts`：自訂 Context API
- `hooks`：自訂 Data Hook，同一種資源的存取可以放在同一個檔案裡讓不同元件取用
- `pages`：頁面元件
- `Home.tsx`
- `Explorer`：如果有只屬於該頁面的元件也可以放進資料夾作管理
- `index.tsx`
- `IntroductionCarousel.tsx`
- `styles`：樣式管理，寫 React 專案的主軸通常是 js，樣式只需要一個資料夾即可
- `utils`：效用函數，與顯示元件沒有相依關係的輔助程式碼
- `timeFormatter.ts` 負責所有跟時間顯示相關的計算
- `orderPriceCalculator.ts` 負責計算產品、折扣等價格相關的計算
- `App.tsx`：React 專案的內容部分，在這個檔案裡通常會放 context、routing 等
- `index.ts`：React 專案的進入點，第一時間需要載入的工具或樣式等

### 一般 JS 專案
我在寫爬蟲或 discord.js 機器人時專案結構相對鬆散，但依然保持相同性質的程式碼就該放在同一個資料夾內：

- `src`
- `commands`：聊天室機器人的主軸是指令，每個指令封裝成模組讓主程式去引入
- `help.ts`
- `ping.ts`
- `scripts`：爬蟲腳本針對各個頁面、不同的 request 作處理
- `fetchDataById.ts`
- `extractFromTable.ts`
- `utils`：效用函數，跟主體資源無相關的單純計算
- `main.ts` 主程式進入點