摘要：背景最近看了發現其項目的目錄結構組織的不錯。然后再按照自己的項目經驗，對其項目的組織進行修改，現在總結下自己的想法。總結以上就是我根據修改的，我認為比較通用的項目目錄結構這里沒有提到測試相關。

最近看了 antd pro 發現其項目的目錄結構組織的不錯。然后再按照自己的項目經驗，對其項目的組織進行修改，現在總結下自己的想法。

我們看下 antd pro 自己生成的目錄結構

  ├── mock                     # 本地模擬數據
  ├── public
  │   └── favicon.ico          # Favicon
  ├── src
  │   ├── assets               # 本地靜態資源
  │   ├── common               # 應用公用配置，如導航信息
  │   ├── components           # 業務通用組件
  │   ├── e2e                  # 集成測試用例
  │   ├── layouts              # 通用布局
  │   ├── models               # dva model
  │   ├── routes               # 業務頁面入口和常用模板
  │   ├── services             # 后臺接口服務
  │   ├── utils                # 工具庫
  │   ├── g2.js                # 可視化圖形配置
  │   ├── theme.js             # 主題配置
  │   ├── index.ejs            # HTML 入口模板
  │   ├── index.js             # 應用入口
  │   ├── index.less           # 全局樣式
  │   └── router.js            # 路由入口
  ├── tests                    # 測試工具
  ├── README.md
  └── package.json

由于 antd pro 本身引用了 antd 的組件庫，所以不存在自己寫通用組件的步驟。但是有的時候我們自己項目會有自己寫通用組件的需要。組件除了有通用組件，還會有業務組件。通用組件是粒度比較細且和業務無關的組件，譬如 Dropdown。而業務組件可能是你這個項目特有的，譬如工具欄，或者某種特殊的彈框。業務組件大多數情況是由（但不僅僅由）通用組件組成。業務組件是粒度比較粗的組件。所以這個時候我一般會把通用組件放在 components 目錄下，而新建一個 widgets 目錄放業務組件，這樣分的比較清楚。不過通用組件和業務組件的劃分邊界并不是每次都能分的很清楚，有時是會相互轉換的，如果實在覺得很難區分，那可以都放在 components 下。

src／models 目錄放的是 dva model，如果你用 redux，那么這里大致可能對應的是 state 的概念，如果用 mobx 這里隱約對應的是 store 的概念。在我看來這些都不是 model，只能叫做狀態（state）相關。我個人理解的 model 應該指的是領域對象也就是領域驅動設計（Domain-Driven Design）中的 domain object，類似于 java bean 的概念。所以我會把放在 models 下面的東西用一個新的目錄存放，通常叫 stores，而 models 下面會放領域對象（domain object）。拿 todo list 為例，我會抽象出一個 TodoItem 的領域對象，其定義：

class TodoItem {
  id = -1;
  text = "";
  done = false;

  constructor( rawData ) {
    if ( rawData ) {
      Object.assign( this, rawData );
    }
  }
}

export default TodoItem;

這個簡單，通常項目都不會少了枚舉值，這個時候我會多帶帶新建一個 enums 的目錄放項目所用到的所有枚舉對象。當然，如果很少的話并入 common 目錄也未嘗不可。 這個時候 src 目錄基本上會變成這樣：

  ├── mock                     # 本地模擬數據
  ├── public
  │   └── favicon.ico          # Favicon
  ├── src
  │   ├── assets               # 本地靜態資源
  │   ├── common               # 應用公用配置，如導航信息
  │   ├── enums                # 枚舉
  │   ├── components           # 通用組件
  │   ├── widgets              # 業務組件
  │   ├── e2e                  # 集成測試用例
  │   ├── layouts              # 通用布局
  │   ├── stores               # 狀態相關對象（dva model）
  │   ├── models               # domain object
  │   ├── routes               # 業務頁面入口和常用模板
  │   ├── services             # 后臺接口服務
  │   ├── utils                # 工具庫
  │   ├── g2.js                # 可視化圖形配置
  │   ├── theme.js             # 主題配置
  │   ├── index.ejs            # HTML 入口模板
  │   ├── index.js             # 應用入口
  │   ├── index.less           # 全局樣式
  │   └── router.js            # 路由入口
  ├── tests                    # 測試工具
  ├── README.md
  └── package.json

看上目錄很多，這里我精簡下，如果你的項目沒有復雜的布局，沒有可視化圖形配置，沒有復雜的路由且用了 react-router4，最后沒有可配置主題那么基本的目錄結構可以精簡為：

  ├── mock                     # 本地模擬數據
  ├── public
  │   └── favicon.ico          # Favicon
  ├── src
  │   ├── assets               # 本地靜態資源
  │   ├── common               # 應用公用配置，如導航信息
  │   ├── enums                # 枚舉
  │   ├── components           # 通用組件
  │   ├── widgets              # 業務組件
  │   ├── stores               # 狀態相關對象（dva model）
  │   ├── models               # domain object
  │   ├── routes               # 業務頁面入口和常用模板
  │   ├── services             # 后臺接口服務
  │   ├── utils                # 工具庫
  │   └── index.js             # 應用入口
  ├── tests                    # 測試工具
  ├── README.md
  └── package.json

如果項目前期設計做的好，抽象建模工作做的到位，其實你會發現，項目目錄大致還可以分為兩類：UI 相關和 UI 無關的。這個時候我會把 UI 相關的放到一個 app 的目錄下，整個項目就會分成 MV（model，view） 的層次：

  ├── mock                     # 本地模擬數據
  ├── public
  │   └── favicon.ico          # Favicon
  ├── src
  │   ├── app
  │   │    ├── assets               # 本地靜態資源
  │   │    ├── components           # 通用組件
  │   │    ├── widgets              # 業務組件
  │   │    ├── stores               # 狀態相關對象（dva model）
  │   │    ├── routes               # 業務頁面入口和常用模板
  │   │    └── index.js
  │   ├── common               # 應用公用配置，如導航信息
  │   ├── enums                # 枚舉
  │   ├── models               # domain object
  │   ├── services             # 后臺接口服務
  │   ├── utils                # 工具庫
  │   └── index.js             # 應用入口
  ├── tests                    # 測試工具
  ├── README.md
  └── package.json

這么做的用意是當你的項目 UI 框架重構的時候可以只動 app 目錄。從 redux 變到 mobx，也可以從 react 變成 angular。當然這層抽象不是必須的，只是我個人偏好，如果要重構通常也會整個項目重構。

以上就是我根據 antd pro 修改的，我認為比較通用的項目目錄結構（這里沒有提到測試相關）。