webpack多頁應用架構系列（十三）：構建一個簡單的模板佈局系統

時間 2019-11-05

標籤 webpack 多頁應用架構系列十三構建一個簡單模板佈局系統欄目系統架構简体版

原文原文鏈接

本文首發於 Array_Huang的技術博客—— 實用至上，非經做者贊成，請勿轉載。
原文地址： http://www.javashuo.com/article/p-oqmneraf-hy.html
若是您對本系列文章感興趣，歡迎關注訂閱這裏： https://segmentfault.com/blog/array_huang

前言

上文《webpack多頁應用架構系列（十二）：利用webpack生成HTML普通網頁&頁面模板》咱們基本上已經搞清楚如何利用html-webpack-plugin來生成HTML普通網頁&頁面模板，本文將以個人腳手架項目Array-Huang/webpack-seed介紹如何在這基礎上搭建一套簡單的模板佈局系統。javascript

模板佈局系統架構圖

模板佈局系統各部分詳解

上文咱們說到，利用模板引擎&模板文件，咱們能夠控制HTML的內容，但這種控制整體來講仍是比較有限的，並且很大程度受限於你對該模板引擎的熟悉程度，那麼，有沒有更簡單的方法呢？css

有！咱們能夠就用咱們最熟悉的js來肆意組裝、拼接出咱們想要的HTML！html

首先來看一個上文提到的例子：前端

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin(
    title: '按照ejs模板生成出來的頁面',
    filename: 'index.html',
    template: 'index.ejs',
  )],
};

這個例子是給html-webpack-plugin指定一個名爲index.ejs的ejs模板文件，來達到生成HTML頁面文件的目的，從html-webpack-plugin的文檔咱們能夠看出，除了默認支持的ejs外，其實還可使用其它模板引擎（例如jade、handlebars、underscore）,支持的方法是在webpack配置文件中配置好相應的loader便可。html5

所以，咱們能夠推理出，html-webpack-plugin其實並不關心你用的是什麼模板引擎，只要你的模板最後export出來的是一份完整的HTML代碼（字符串）就能夠了。因而，我作了一個大膽的嘗試，給html-webpack-plugin的template參數指定一個js文件，而後在此js文件末尾export出一份完整的HTML代碼來。這個js文件我命名爲「模板接口」（上面架構圖上有標識），意思是，不是光靠這一個js文件就能造成一份模板，「接口」以後是一套完整的模板佈局體系。下面以webpack-seed項目裏的src/pages/alert/index（「消息通知」頁）做爲例子進行說明。java

`html-webpack-plugin`配置

先來看看我是如何給html-webpack-plugin指定一個js做爲模板的：webpack

/* 
  這是用來生成alert/index頁的HtmlWebpackPlugin配置
  在原項目中是循環批量new HtmlWebpackPlugin的，此處爲了更容易理解，特別針對alert/index頁作了修改
*/
new HtmlWebpackPlugin({
    filename: `alert/index/page.html`,
    template: path.resolve(dirVars.pagesDir, `./alert/index/html.js`), // 指定爲一個js文件而非普通的模板文件
    chunks: ['alert/index', 'commons'], // 自動加載上index/login的入口文件以及公共chunk
    hash: true, // 爲靜態資源生成hash值
    xhtml: true,  // 須要符合xhtml的標準
});

模板接口

下面來介紹這個做爲模板接口的js文件：git

/* 選自webpack-seed/pages/alert/index/html.js  */
const content = require('./content.ejs');  // 調取存放本頁面實際內容的模板文件
const layout = require('layout');  // 調用管理後臺內部所使用的佈局方案，我在webpack配置裏定義其別名爲'layout'
const pageTitle = '消息通知'; // 頁面名稱

// 給layout傳入「頁面名稱」這一參數（固然有須要的話也能夠傳入其它參數），同時也傳入頁面實際內容的HTML字符串。content({ pageTitle })的意思就是把pageTitle做爲模板變量傳給ejs模板引擎並返回最終生成的HTML字符串。
module.exports = layout.init({ pageTitle }).run(content({ pageTitle }));

從代碼裏咱們能夠看出，模板接口的做用實際上就是整理好當前頁面獨有的內容，而後交與layout做進一步的渲染；另外一方面，模板接口直接把layout最終返回的結果（完整的HTML文檔）給export出來，供html-webpack-plugin生成HTML文件使用。github

頁面實際內容長啥樣？

<!-- 選自webpack-seed/pages/alert/index/content.ejs -->
<div id="page-wrapper">
  <div class="container-fluid" >
    <h2 class="page-header"><%= pageTitle %></h2>
    <!-- ...... -->
  </div>
</div>

layout

接着咱們來看看整套模板佈局系統的核心——layout。layout的主要功能就是接收各個頁面獨有的參數（好比說頁面名稱），並將這些參數傳入各個公共組件生成各組件的HTML，而後根據layout自己的模板文件將各組件的HTML以及頁面實際內容的HTML拼接在一塊兒，最終造成一個完整的HTML頁面文檔。web

/* 選自webpack-seed/src/public-resource/layout/layout/html.js */
const config = require('configModule');
const noJquery = require('withoutJqueryModule');
const layout = require('./html.ejs'); // 整個頁面佈局的模板文件，主要是用來統籌各個公共組件的結構
const header = require('../../components/header/html.ejs'); // 頁頭的模板
const footer = require('../../components/footer/html.ejs'); // 頁腳的模板
const topNav = require('../../components/top-nav/html.ejs'); // 頂部欄的模板
const sideMenu = require('../../components/side-menu/html.ejs'); // 側邊欄的模板
const dirsConfig = config.DIRS;

/* 整理渲染公共部分所用到的模板變量 */
const pf = {
  pageTitle: '',
  constructInsideUrl: noJquery.constructInsideUrl,
};

const moduleExports = {
  /* 處理各個頁面傳入而又須要在公共區域用到的參數 */
  init({ pageTitle }) {
    pf.pageTitle = pageTitle; // 好比說頁面名稱，會在<title>或麪包屑裏用到
    return this;
  },

  /* 整合各公共組件和頁面實際內容，最後生成完整的HTML文檔 */
  run(content) {
    const headerRenderData = Object.assign(dirsConfig, pf); // 頁頭組件須要加載css/js等，所以須要比較多的變量
    const renderData = {
      header: header(headerRenderData),
      footer: footer(),
      topNav: topNav(pf),
      sideMenu: sideMenu(pf),
      content,
    };
    return layout(renderData);
  },
};

module.exports = moduleExports;

接下來看看layout自己的模板文件長啥樣吧：

<!-- 選自webpack-seed/src/public-resource/layout/layout/html.ejs -->
<%= header %>
<div id="wrapper">
  <%= topNav %>
  <%= sideMenu %>
  <%= content %>
</div>
<%= footer %>

組件

整個頁面的公共部分，被我以區域的形式切分紅一個一個的組件，下面以頁頭組件做爲例子進行解釋：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title><% if (pageTitle) { %> <%= pageTitle %> - <% } %> XXXX後臺</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> 
  <meta name="renderer" content="webkit" />

  <link rel="stylesheet" type="text/css" href="<%= BUILD_FILE.dll.css %>">
  <script type="text/javascript" src="<%= BUILD_FILE.dll.js %>"></script>
  <!--[if lt IE 10]>
    <script src="<%= BUILD_FILE.js.xdomain %>" slave="<%= SERVER_API_URL %>cors-proxy.html"></script>
    <script src="<%= BUILD_FILE.js.html5shiv %>"></script>
  <![endif]-->
</head>
<body>
  <!--[if lt IE 9]>
    <script src="<%= BUILD_FILE.js.respond %>"></script>
  <![endif]-->

頁頭組件控制的範圍基本上就是整個<head>以及<body>的頭部。

不要小看這<body>的頭部，因爲webpack在使用extract-text-webpack-plugin生成CSS文件並自動加載時，會把<link>放在<head>的最後，而衆所周知，實現IE8下Media Queries特性的respond.js是須要放在css後面來加載的，所以，咱們就只能把respond.js放到<body>的頭部來加載了。

因爲個人腳手架項目仍是比較簡單的，因此這些公共組件的HTML都是直接根據模板文件來輸出的；若是組件自己要處理的邏輯比較多，可使用跟模板接口同樣的思路，利用js文件來拼接。

至於組件自己行爲的邏輯(js)，能夠一併放到各組件的目錄裏，在公共chunk裏調用即是了。本文實際上只關注於如何生成HTML，這裏提到這個只是提示一下組件的文件目錄結構。

這裏稍微再解釋一下BUILD_FILE.js.*和BUILD_FILE.dll.*是什麼，這些其實都是沒有用webpack打包起來的js/css，我用file-loader把這些文件從src目錄搬到build目錄了，這裏模板變量輸出的都是搬運後的路徑，具體請看《webpack多頁應用架構系列（六）：據說webpack連圖片和字體也能打包？》。啓動搬運的代碼放在webpack-seed/src/public-resource/config/build-file.config.js。

總結

有了這套模板佈局系統，咱們就能夠輕鬆地生成具備相同佈局的多個靜態頁面了，「如何管理頁面佈局公共部分」這一多頁應用的痛點也就順利解決了。

示例代碼

諸位看本系列文章，搭配我在Github上的腳手架項目食用更佳哦（笑）：Array-Huang/webpack-seed（https://github.com/Array-Huang/webpack-seed）。

附系列文章目錄（同步更新）

本文首發於 Array_Huang的技術博客—— 實用至上，非經做者贊成，請勿轉載。
原文地址： http://www.javashuo.com/article/p-oqmneraf-hy.html
若是您對本系列文章感興趣，歡迎關注訂閱這裏： https://segmentfault.com/blog/array_huang