git 建立webpack專案前端工程專案結構

工程結構指的是**組織方式，比如常見的組織方式，核心**放在src，公共庫放在lib，測試**放在test等等。

所以如果有100個團隊應該就會有100種方式了。但是今天討論的主題不是哪種組織方式最好，而是這些組織方式背後的主要目的。

自從nodejs面世，前端工程化取得了巨大的進步，不僅出現了grunt、gulp這樣的任務執行器，還有webpack、rollup這樣的構建工具。所以，工程組織結構不再重要，只要配置好你的構建工具，包括專案的入口，那麼你就可以只需要聚焦你的精力在業務上就可以了。

所以我們的目標就是，隔離變化，沉澱共識。

怎麼理解這句話呢？

前端直接面向使用者，會有各種各樣的需求，這些需求不全是一樣的，也並非完全不一樣。

所以不同的專案我們可以用「平鋪」的方式去管理它們，比如現在流行的nuxt框架的多頁面結構，就是使用「平鋪」方式，把多個專案用多個頁面去表示。對於公共部分，比如通用ui元件、網路請求元件、監控元件、上報元件等等，就會抽離出業務專案，放到公共庫里。

事實上，我所在的專案組就是用類似nuxt框架去組織**的，不過是內部自研的，有些許不同。重要的是，團隊裡需要約定好在哪個目錄下存放專案。因為webpack提供了api介面，所以其實我們是可以自定義熱更新邏輯（這一點會在後面的文章《前端開發環境》裡繼續講述）。

因為開發過程中我們有如下的需求：

統一處理配置，包括開發階段和上線階段

把一些說明文件聚合在一起

把開發過程中用到的一些指令碼聚到一起，比如本地執行指令碼、構建指令碼、git鉤子指令碼、ci指令碼等等

管理腳手架

公共模組聚合

需求專案聚合

專案根目錄下還有一些工具配置檔案，如eslint、ci、git等等

所以，一般的前端工程結構大致如下：

configs/ docs/ lib/ projects/ templates/ scripts/ .gitignore .git-commit-template .eslint

.ci

前端架構和需求的關係：

git 建立webpack專案 前端工程專案結構