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