背景
每個(gè)公司甚至每個(gè)項(xiàng)目組，在開(kāi)發(fā)新項(xiàng)目的時(shí)候都會(huì)有一些自己特色的東西灵汪，比如公共組件檀训，ajax請(qǐng)求攔截處理，內(nèi)部積累的一些業(yè)務(wù)邏輯等等享言，如果沒(méi)有自己的腳手架峻凫，那么拷貝代碼成為常態(tài)，每個(gè)項(xiàng)目的結(jié)構(gòu)览露，甚至是構(gòu)建配置都會(huì)由很大差異荧琼，導(dǎo)致代碼維護(hù)成為一個(gè)難題。
簡(jiǎn)介
generator-ivweb是由騰訊IVWEB團(tuán)隊(duì)設(shè)計(jì)的腳手架，基于團(tuán)隊(duì)開(kāi)源項(xiàng)目feflow命锄，feflow是一個(gè)前端集成開(kāi)發(fā)環(huán)境堰乔，詳細(xì)介紹可以看這里：feflow。
技術(shù)棧
- React
- redux
- less
- axios
- webpack4
...
讓你心動(dòng)的地方
相對(duì)于官方腳手架脐恩，我們不僅僅是初始化一個(gè)項(xiàng)目镐侯，更多的是滿足實(shí)際開(kāi)發(fā)場(chǎng)景。
- 支持多頁(yè)項(xiàng)目
- 頁(yè)面適配
- 內(nèi)聯(lián)語(yǔ)法
- 構(gòu)建優(yōu)化
- 豐富的默認(rèn)配置文件
架構(gòu)設(shè)計(jì)
目錄結(jié)構(gòu)
generator-ivweb-app
├── README.md
├── package.json
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── feflow.json
├── config.json
├── node_modules
├── dist
└── src
├── assets
├── middleware
├── modules
└── pages
├── otherPage
└── indexPage
├── index.html
├── index.js
├── index.less
├── index.js
├── init.js
├── pageComponent.js
├── actions
├── assets
├── components
└── reducers
- 開(kāi)發(fā)和構(gòu)建
這里我們默認(rèn)都是src為開(kāi)發(fā)目錄驶冒，dist為打包目錄苟翻，當(dāng)然你可以在feflow.json中配置為其他輸出目錄。
{
"builderOptions": {
"outDir": "dist" //輸出目錄名稱
}
}
- 多頁(yè)目錄
多頁(yè)放在pages目錄下骗污，每個(gè)頁(yè)面一個(gè)單獨(dú)文件夾崇猫，訪問(wèn)的路徑如下：
https://xxx.xxx.xxx/xxx/indexPage.html
https://xxx.xxx.xxx/xxx/otherPage.html
頁(yè)面結(jié)構(gòu)化繼承（多頁(yè)設(shè)計(jì)）
正常來(lái)說(shuō)，多頁(yè)應(yīng)用只需要有自己的入口就可以需忿，在入口文件我們可能需要做這么幾件事
- 注入store
- 設(shè)置全局配置
- 頁(yè)面監(jiān)控
- 將組件渲染到頁(yè)面
...
上面只是列舉了一些基本的東西诅炉，當(dāng)然還會(huì)有很多，甚至是一些跟業(yè)務(wù)相關(guān)的基本信息屋厘，而這些東西對(duì)于一個(gè)工程下的多個(gè)頁(yè)面來(lái)可能都是一樣的涕烧，不僅操作不方便，維護(hù)也很麻煩擅这。這里我們提出一個(gè)概念：頁(yè)面結(jié)構(gòu)化繼承澈魄。
繼承大家都很熟悉景鼠，而react是可以用function/class方式來(lái)寫(xiě)組件的仲翎，我們?cè)谟胏lass方式寫(xiě)組件就是繼承自React.Component，那么對(duì)于這些公有東西我們也可以封裝成一個(gè)組件铛漓，通過(guò)繼承的方式來(lái)獲取這些能力溯香。
| 創(chuàng)建BasePage | 頁(yè)面繼承 |
|---|---|
 創(chuàng)建BasePage
|
 繼承basePage
|
此處只寫(xiě)了對(duì)于多頁(yè)的應(yīng)用，對(duì)于復(fù)雜的單頁(yè)應(yīng)用同樣是適用的浓恶。
組件劃分
通常我們?cè)陂_(kāi)發(fā)一個(gè)單頁(yè)應(yīng)用都會(huì)抽離一些公共組件玫坛，比如title-bar
| 首頁(yè) | 博客頁(yè) |
|---|---|
 image.png
|
 image.png
|
如果這里是個(gè)多頁(yè)應(yīng)用，同樣是可以公用的包晰，因此對(duì)于多頁(yè)應(yīng)用來(lái)說(shuō)湿镀，組件應(yīng)該是這樣的結(jié)構(gòu)：
狀態(tài)管理
每個(gè)頁(yè)面的狀態(tài)管理同樣是可以抽離一些公共action和reducer，比如登錄邏輯
模塊化
鑒于腳手架默認(rèn)是多頁(yè)項(xiàng)目伐憾，我們把公共模塊放到外層目錄勉痴，減少跟每個(gè)頁(yè)面的耦合。
modules
├── common //公用js模塊
├── components //公用組件
├── globalStore //store配置树肃，包含中間件注入
└── page //頁(yè)面結(jié)構(gòu)繼承組件
構(gòu)建
這里使用feflow的構(gòu)建器：builder-webpack4蒸矛，當(dāng)然這個(gè)東西同樣是可以配置的，甚至可以根據(jù)我們的官方構(gòu)建器寫(xiě)自己的構(gòu)建器。
項(xiàng)目配置
腳手架是基于feflow的雏掠，因此feflow.json文件是feflow項(xiàng)目的基礎(chǔ)配置斩祭，包含了一些構(gòu)建選項(xiàng)，比如輸出目錄乡话，域名摧玫，webpack相關(guān)等。
{
"builderType": "builder-webpack4", //構(gòu)建器類型
"builderOptions": {
"product": "", //產(chǎn)品民稱
"outDir": "dist", //構(gòu)建輸出目錄
"minifyHTML": true,
"minifyCSS": true,
"minifyJS": true,
"inlineCSS": true,
"usePx2rem": true, //是否轉(zhuǎn)化px
"remUnit": 37.5, //rem基準(zhǔn)
"remPrecision": 6,
"inject": true,
"useTreeShaking": true,
"port": 8001, //項(xiàng)目端口
"hot": true,
"externals": [
{
"module": "react",
"entry": "http://11.url.cn/now/lib/16.2.0/react.min.js?_bid=3123",
"global": "React"
},
{
"module": "react-dom",
"entry": "http://11.url.cn/now/lib/16.2.0/react-dom.min.js?_bid=3123",
"global": "ReactDOM"
}
]
}
}
其他
項(xiàng)目默認(rèn)是不顯示構(gòu)建相關(guān)配置的绑青，一方面席赂，我們有暴露一些基礎(chǔ)配置項(xiàng)，另一方面避免多人協(xié)作開(kāi)發(fā)更改配置問(wèn)題时迫，如果你想查看或修改可以使用命令展示(不建議修改配置)
feflow eject
優(yōu)勢(shì)
多頁(yè)支持
generator-ivweb先天支持多頁(yè)應(yīng)用颅停，而不用我們?cè)偃ebpack中配置，在開(kāi)發(fā)中只需要在pages下創(chuàng)建多個(gè)目錄即可掠拳。
頁(yè)面適配
項(xiàng)目默認(rèn)接入rem適配癞揉，會(huì)自動(dòng)把px轉(zhuǎn)成rem，當(dāng)然溺欧，如果某些地方不想被轉(zhuǎn)化喊熟，有兩種方式：
- 修改px寫(xiě)法
height: 300Px; - feflow.json中設(shè)置usePx2rem為false
- 打包優(yōu)化
generator-ivweb默認(rèn)使用builder-webpack4構(gòu)建，webpack4中所做的一些優(yōu)化姐刁，比如treeShaking都有用到芥牌。并且這里我們默認(rèn)給react和react-dom加了外鏈cdn(使用我們自己的cdn，如果不放心可以改為自己的cdn)聂使。
-
內(nèi)聯(lián)語(yǔ)法
比如一些meta標(biāo)簽壁拉，頁(yè)面loading等，都可以通過(guò)內(nèi)聯(lián)方式引入
<!--inline[/assets/inline/meta.html]-->還有一些js文件我們可能也需要內(nèi)聯(lián)到html中提前加載
<script src="amfe-flexible/index.js?__inline"></script> -
多樣化配置文件
項(xiàng)目默認(rèn)集成了gitignore柏靶、eslint弃理、editorconfig等配置，為倉(cāng)庫(kù)管理和開(kāi)發(fā)提供了便捷屎蜓。
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
如何使用
# 安裝feflow
npm install feflow-cli -g
# 安裝腳手架
feflow install generator-ivweb
# 啟動(dòng)項(xiàng)目
feflow init
未來(lái)規(guī)劃
- 添加測(cè)試用例痘昌，提高穩(wěn)定性。
- 完善腳手架內(nèi)容炬转，提供更高效的內(nèi)容
項(xiàng)目地址
https://github.com/feflow/generator-ivweb辆苔， 歡迎大家提issue以便于我們改進(jìn)。
