資訊專欄INFORMATION COLUMN
摘要：回到純靜態(tài)頁面開發(fā)階段，讓頁面不需要后端渲染也能跑起來。改造開始本文著重介紹如何將靜態(tài)頁面改造成后端渲染需要的模板。總結(jié)在后端渲染的項目里使用多頁應(yīng)用架構(gòu)是絕對可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。
本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。前言
原文地址：https://segmentfault.com/a/1190000008203380
如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang
近年來前端領(lǐng)域發(fā)展迅猛，前后端分離早已成為業(yè)界共識，各類管控系統(tǒng)(to B)上個SPA什么的也不值一提，但唯獨(dú)偏展示類的項目，為了SEO，始終還是需要依賴于服務(wù)器端渲染html。
我過往也曾嘗試為SPA彌補(bǔ)SEO，但現(xiàn)在看來，效果雖然達(dá)到了，但工作量也大大地增加（因為后端用的PHP，不能做到前后同構(gòu)）。
雖然無法改變依賴服務(wù)器端渲染這一現(xiàn)實(shí)，但我們可以去勇敢地?fù)肀们岸说膱源?aka webpack)，把服務(wù)器端模板層給啃下來！
前導(dǎo)知識webpack的基本使用
利用webpack生成HTML文件，及，構(gòu)建模板布局系統(tǒng)
你所在項目后端模板引擎（如我目前使用的Slim框架，模板引擎僅為原生PHP）
兩個階段整個前端項目，以本文主題的視角來看，可以分為兩個階段：
純靜態(tài)頁面開發(fā)階段在這個階段里，一切開發(fā)都跟靜態(tài)網(wǎng)站無二致，按UI稿切好頁面搞好交互，要用到ajax請求API的也盡管寫，跟后端的協(xié)作點(diǎn)僅在于API文檔。
傳統(tǒng)前端的工作也就到這里為止了，但對我們來說，目前的成果并不是我們最終的交付；因此，注意了，在這個階段我們是可以“偷懶”的，比如說，一些明顯應(yīng)該由服務(wù)器端循環(huán)生成的部分（商品列表、文章列表等），我們寫一遍就OK了。
動態(tài)頁面改造階段這就是所謂的“套頁面”，傳統(tǒng)來說是由后端來做的，實(shí)際上后端也是苦不堪言，畢竟模板不是自己寫的，有時還是需要改造一番，而這正是我們前端要大力爭取的活。
在這個階段里，我們的主要工作是按照后端模板引擎的規(guī)則來撰寫模板變量占位符，當(dāng)然這里面也不會少了循環(huán)輸出和邏輯判斷，另外也可能需要用到后端定義的一些函數(shù)，視項目需求而定。
在兩個階段里來回往返這兩個階段不一定是完全獨(dú)立的，有需要的話也是可以做到來回往返的。
那什么時候才叫做“有需要”呢？舉個例子，當(dāng)你把原先的靜態(tài)頁面都改造成需要后端渲染的頁面模板后，卻發(fā)現(xiàn)后端此時并未準(zhǔn)備好相應(yīng)的模板變量，而你此時又需要對頁面的UI部分進(jìn)行修改，那么你就很被動了，因為改好的這些頁面模板根本跑不起來了。有兩種解決方案：
參考API mock的思路，來個模板變量 mock，這就相當(dāng)于一直留在動態(tài)頁面改造階段了。
回到純靜態(tài)頁面開發(fā)階段，讓頁面不需要后端渲染也能跑起來。具體怎么做呢？
區(qū)分開兩個階段，使用不同的webpack配置。
在我們構(gòu)建生成頁面的前端模板（注意分清與后端模板的區(qū)別），判斷（判斷依據(jù)看這里）本次執(zhí)行webpack打包是在哪個“階段”，繼而選擇是生成靜態(tài)（且完整）的element，還是帶有模板變量占位符的element。這樣一來，我們就可以隨時選擇在不同的階段（或稱環(huán)境）里進(jìn)行開發(fā)了。
改造開始本文著重介紹如何將靜態(tài)頁面改造成后端渲染需要的模板。
配合后端模板命名規(guī)則生成相應(yīng)模板文件不同項目因應(yīng)本身所使用的后端框架或是其它需求，對模板放置的目錄結(jié)構(gòu)也會有所不一樣，那么，如何構(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`, // 通過控制相對路徑來確定模板的根目錄
template: path.resolve(dirVars.pagesDir, `./${page}/html.js`),
chunks: [page, "commons/commons"],
hash: true,
xhtml: true,
});
pluginsConfig.push(htmlPlugin);
});
此時我模板目錄結(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
這里需要注意的是，我的前端項目目錄實(shí)際上是作為后端目錄里的一個子目錄來存放的，這樣才能依靠相對路徑來確定模板文件存放的根目錄位置。
處理站內(nèi)鏈接對于站內(nèi)鏈接，我建議在前端模板里使用一個函數(shù)來適配兩個階段：
{
/* 拼接系統(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 ` "${url}"), $isStaticize)?>`;
},
};
在前端模板里這么用：
