本文首發(fā)于Array_Huang的技術(shù)博客——
實(shí)用至上揣苏，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載拒迅。
原文地址：https://segmentfault.com/a/1190000008203380
如果您對(duì)本系列文章感興趣骚秦，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang
前言
近年來前端領(lǐng)域發(fā)展迅猛，前后端分離早已成為業(yè)界共識(shí)坪它，各類管控系統(tǒng)(to B)上個(gè)SPA什么的也不值一提骤竹，但唯獨(dú)偏展示類的項(xiàng)目，為了SEO往毡，始終還是需要依賴于服務(wù)器端渲染html蒙揣。
我過往也曾嘗試為SPA彌補(bǔ)SEO，但現(xiàn)在看來开瞭，效果雖然達(dá)到了懒震，但工作量也大大地增加（因?yàn)楹蠖擞玫腜HP，不能做到前后同構(gòu)）嗤详。
雖然無法改變依賴服務(wù)器端渲染這一現(xiàn)實(shí)个扰，但我們可以去勇敢地?fù)肀们岸说膱?jiān)船利炮(aka webpack)葱色，把服務(wù)器端模板層給啃下來递宅！
前導(dǎo)知識(shí)
- webpack的基本使用
- 利用webpack生成HTML文件，及苍狰，構(gòu)建模板布局系統(tǒng)
- 你所在項(xiàng)目后端模板引擎（如我目前使用的Slim框架办龄，模板引擎僅為原生PHP）
兩個(gè)階段
整個(gè)前端項(xiàng)目，以本文主題的視角來看淋昭，可以分為兩個(gè)階段：
純靜態(tài)頁面開發(fā)階段
在這個(gè)階段里俐填，一切開發(fā)都跟靜態(tài)網(wǎng)站無二致，按UI稿切好頁面搞好交互翔忽，要用到ajax請(qǐng)求API的也盡管寫英融，跟后端的協(xié)作點(diǎn)僅在于API文檔盏檐。
傳統(tǒng)前端的工作也就到這里為止了，但對(duì)我們來說驶悟，目前的成果并不是我們最終的交付胡野；因此，注意了撩银，在這個(gè)階段我們是可以“偷懶”的给涕，比如說，一些明顯應(yīng)該由服務(wù)器端循環(huán)生成的部分（商品列表额获、文章列表等）够庙，我們寫一遍就OK了。
動(dòng)態(tài)頁面改造階段
這就是所謂的“套頁面”抄邀，傳統(tǒng)來說是由后端來做的耘眨，實(shí)際上后端也是苦不堪言，畢竟模板不是自己寫的境肾，有時(shí)還是需要改造一番剔难，而這正是我們前端要大力爭取的活。
在這個(gè)階段里奥喻，我們的主要工作是按照后端模板引擎的規(guī)則來撰寫模板變量占位符偶宫，當(dāng)然這里面也不會(huì)少了循環(huán)輸出和邏輯判斷，另外也可能需要用到后端定義的一些函數(shù)环鲤，視項(xiàng)目需求而定纯趋。
在兩個(gè)階段里來回往返
這兩個(gè)階段不一定是完全獨(dú)立的，有需要的話也是可以做到來回往返的冷离。
那什么時(shí)候才叫做“有需要”呢吵冒？舉個(gè)例子，當(dāng)你把原先的靜態(tài)頁面都改造成需要后端渲染的頁面模板后西剥，卻發(fā)現(xiàn)后端此時(shí)并未準(zhǔn)備好相應(yīng)的模板變量痹栖，而你此時(shí)又需要對(duì)頁面的UI部分進(jìn)行修改，那么你就很被動(dòng)了瞭空，因?yàn)楦暮玫倪@些頁面模板根本跑不起來了揪阿。有兩種解決方案：
- 參考
API mock的思路，來個(gè)模板變量 mock咆畏，這就相當(dāng)于一直留在動(dòng)態(tài)頁面改造階段了图甜。 - 回到純靜態(tài)頁面開發(fā)階段，讓頁面不需要后端渲染也能跑起來鳖眼。具體怎么做呢？
改造開始
本文著重介紹如何將靜態(tài)頁面改造成后端渲染需要的模板易结。
配合后端模板命名規(guī)則生成相應(yīng)模板文件
不同項(xiàng)目因應(yīng)本身所使用的后端框架或是其它需求，對(duì)模板放置的目錄結(jié)構(gòu)也會(huì)有所不一樣柜候，那么搞动，如何構(gòu)建后端所需要的目錄結(jié)構(gòu)呢？
在靜態(tài)網(wǎng)頁階段渣刷，我習(xí)慣把html/css/js都按照所屬頁面歸到各自的目錄中（公用的css/js也當(dāng)然是放到公用目錄中）鹦肿，看HtmlWebpackPlugin配置：
pageArr.forEach((page) => {
const htmlPlugin = new HtmlWebpackPlugin({
filename: `${page}/index.html`, // page變量形如'product/index'、'product/detail'
template: path.resolve(dirVars.pagesDir, `./${page}/html.js`),
chunks: [page, 'commons/commons'],
hash: true,
xhtml: true,
});
pluginsConfig.push(htmlPlugin);
});
而在改造階段辅柴，則放到后端指定位置：
pageArr.forEach((page) => {
const htmlPlugin = new HtmlWebpackPlugin({
filename: `../../view/frontend/${page}.php`, // 通過控制相對(duì)路徑來確定模板的根目錄
template: path.resolve(dirVars.pagesDir, `./${page}/html.js`),
chunks: [page, 'commons/commons'],
hash: true,
xhtml: true,
});
pluginsConfig.push(htmlPlugin);
});
此時(shí)我模板目錄結(jié)構(gòu)是這樣的：
│
├─alert
│ index.php
│
├─article
│ detail.php
│ index.php
│
├─index
│ index.php
│
├─product
│ detail.php
│ index.php
│
└─user
edit-password.php
modify-info.php
這里需要注意的是箩溃，我的前端項(xiàng)目目錄實(shí)際上是作為后端目錄里的一個(gè)子目錄來存放的，這樣才能依靠相對(duì)路徑來確定模板文件存放的根目錄位置碌嘀。
處理站內(nèi)鏈接
對(duì)于站內(nèi)鏈接涣旨，我建議在前端模板里使用一個(gè)函數(shù)來適配兩個(gè)階段：
{
/* 拼接系統(tǒng)內(nèi)部的URL */
constructInsideUrl(url, request, urlTail) {
urlTail = urlTail || '';
let finalUrl = config.PAGE_ROOT_PATH + url;
if (!config.IS_PRODUCTION_MODE) {
finalUrl += '/index.html' + urlTail;
return finalUrl;
}
return `<?php echo cf::constructInsideUrl(array('module' => '${url}'), $isStaticize)?>`;
},
};
在前端模板里這么用：
<a href="<%= constructInsideUrl('index/index') %>">
<img src="<%= require('./logo.png') %>">
</a>
這樣做，就能分別在靜態(tài)頁面階段和后端渲染階段生成相應(yīng)的超鏈接股冗。再者霹陡，在后端渲染階段，我們生成出來的也不一定是一個(gè)完整的url魁瞪，可以像我上述代碼一樣穆律，生成調(diào)用后端函數(shù)的模板代碼，從而靈活滿足后端的一些需求（比如說导俘，我的項(xiàng)目有靜態(tài)化的需求峦耘，那么，靜態(tài)化后的站內(nèi)鏈接跟動(dòng)態(tài)渲染的又會(huì)有所不同了）旅薄。
處理模板變量
這一塊其實(shí)我要說的不多辅髓，無非就是按照后端模板引擎的規(guī)則，輸出變量少梁、循環(huán)輸出變量洛口、判斷條件輸出變量、調(diào)用后端（模板引擎）函數(shù)調(diào)整輸出變量凯沪。
關(guān)鍵是第焰，我們需要拿到一份模板變量文檔，跟API文檔類似妨马，它實(shí)際上也是一份前后端的數(shù)據(jù)協(xié)議挺举。有了這份文檔杀赢，我們才能在后端未完工的情況下，進(jìn)入動(dòng)態(tài)頁面改造階段湘纵，并根據(jù)其中內(nèi)容實(shí)現(xiàn)模板變量 mock脂崔。
爭討模板布局渲染權(quán)
關(guān)于利用模板布局系統(tǒng)對(duì)多個(gè)頁面共有的部分實(shí)現(xiàn)復(fù)用，在之前的文章里已經(jīng)提及了梧喷，我設(shè)計(jì)該系統(tǒng)的思路恰恰是來自于后端模板渲染砌左。那么，在前后端均可以實(shí)現(xiàn)模板布局系統(tǒng)的前提下铺敌，我們應(yīng)如何抉擇呢汇歹？我的答案是，前端一定要吃下來适刀！
從前端的角度來看：
- 我們?cè)?strong>純靜態(tài)頁面開發(fā)階段的產(chǎn)物就已經(jīng)是一個(gè)個(gè)完整的頁面了秤朗，再要拆開并不現(xiàn)實(shí)。
- 由于在webpack的輔助下這套模板布局系統(tǒng)功能相當(dāng)強(qiáng)大笔喉，因此并沒有給整個(gè)項(xiàng)目添加額外的成本取视。
從后端的角度來看：
- 服務(wù)器拼接多個(gè)HTML代碼段本身也是有成本（比如磁盤IO成本）的，倒不如渲染一個(gè)完整的頁面常挚。
- 在公共組件的分治管理上不會(huì)有很大變化作谭，只不過以前是一個(gè)一個(gè)組件渲染好后再拼在一起，而現(xiàn)在是把各個(gè)組件的數(shù)據(jù)整合在一起來統(tǒng)一渲染罷了奄毡。
總結(jié)
在后端渲染的項(xiàng)目里使用webpack多頁應(yīng)用架構(gòu)是絕對(duì)可行的折欠，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。
示例代碼
諸位看本系列文章吼过，搭配我在Github上的腳手架項(xiàng)目食用更佳哦（笑）：Array-Huang/webpack-seed（https://github.com/Array-Huang/webpack-seed）锐秦。
附系列文章目錄（同步更新）
- webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)
- webpack多頁應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？
- webpack多頁應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)盗忱？
- webpack多頁應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟酱床，怎么兼容？
- webpack多頁應(yīng)用架構(gòu)系列（五）：聽說webpack連less/css也能打包趟佃？
- webpack多頁應(yīng)用架構(gòu)系列（六）：聽說webpack連圖片和字體也能打包扇谣？
- webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚闲昭？
- webpack多頁應(yīng)用架構(gòu)系列（八）：教練我要寫ES6罐寨！webpack怎么整合Babel？
- webpack多頁應(yīng)用架構(gòu)系列（九）：總有刁民想害朕序矩！ESLint為你阻擊垃圾代碼
- webpack多頁應(yīng)用架構(gòu)系列（十）：如何打造一個(gè)自定義的bootstrap
- webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll鸯绿，實(shí)現(xiàn)webpack音速編譯
- webpack多頁應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁&頁面模板
- webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡單的模板布局系統(tǒng)
- webpack多頁應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項(xiàng)目共用基礎(chǔ)設(shè)施
- webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存
本文首發(fā)于Array_Huang的技術(shù)博客——
實(shí)用至上，非經(jīng)作者同意楞慈，請(qǐng)勿轉(zhuǎn)載幔烛。
原文地址：https://segmentfault.com/a/1190000008203380
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang
