webpack多页运用架构系列（十五）：论前端怎样在后端衬着开辟形式下夹缝生计

2024年3月1日 211次阅读 来源: array_huang

本文首发于
Array_Huang的手艺博客——
有用至上，非经作者赞同，请勿转载。

原文地点：
https://segmentfault.com/a/1190000008203380

如果您对本系列文章感兴趣，迎接关注定阅这里：
https://segmentfault.com/blog/array_huang

媒介

近年来前端范畴生长迅猛，前后端星散早已成为业界共鸣，各种管控体系(to B)上个SPA什么的也何足道哉，但惟独偏展现类的项目，为了SEO，一向照样须要依托于服务器端衬着html。

我过往也曾尝试为SPA填补SEO，但现在看来，结果虽然达到了，但事情量也大大地增添（因为后端用的PHP，不能做到前后同构）。

虽然没法转变依托服务器端衬着这一实际，但我们能够去勇敢地拥抱它，用前端的坚船利炮(aka webpack)，把服务器端模板层给啃下来！

前导学问

两个阶段

全部前端项目，以本文主题的视角来看，能够分为两个阶段：

纯静态页面开辟阶段

在这个阶段里，统统开辟都跟静态网站无二致，按UI稿切好页面搞好交互，要用到ajax要求API的也只管写，跟后端的合作点仅在于API文档。

传统前端的事情也就到这里为止了，但对我们来讲，现在的效果并非我们终究的托付；因而，注重了，在这个阶段我们是能够“偷懒”的，比方说，一些显著应该由服务器端轮回天生的部份（商品列表、文章列表等），我们写一遍就OK了。

动态页面革新阶段

这就是所谓的“套页面”，传统来讲是由后端来做的，实际上后端也是苦不堪言，毕竟模板不是自身写的，偶然照样须要革新一番，而这恰是我们前端要鼎力大举争夺的活。

在这个阶段里，我们的重要事情是依据后端模板引擎的划定规矩来撰写模板变量占位符，固然这内里也不会少了轮回输出和逻辑推断，别的也能够须要用到后端定义的一些函数，视项目需求而定。

在两个阶段里往复往复

这两个阶段不肯定是完全自力的，有须要的话也是能够做到往复往复的。

那什么时候才叫做“有须要”呢？举个例子，当你把本来的静态页面都革新成须要后端衬着的页面模板后，却发明后端此时并未准备好响应的模板变量，而你此时又须要对页面的UI部份举行修正，那末你就很被动了，因为改好的这些页面模板基础跑不起来了。有两种处理方案：

  • 参考API mock的思绪，来个模板变量 mock，这就相称于一向留在动态页面革新阶段了。

  • 回到纯静态页面开辟阶段，让页面不须要后端衬着也能跑起来。详细怎样做呢？

    1. 区离开两个阶段，运用差别的webpack设置。
    2. 在我们构建天生页面的前端模板（注重分清与后端模板的区分），推断（推断依据看这里）本次实行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 `<?php echo cf::constructInsideUrl(array('module' => '${url}'), $isStaticize)?>`;
  },
};

在前端模板里这么用：

<a href="<%= constructInsideUrl('index/index') %>">
  <img src="<%= require('./logo.png') %>">
</a>

如许做，就可以分别在静态页面阶段和后端衬着阶段天生响应的超链接。再者，在后端衬着阶段，我们天生出来的也不肯定是一个完全的url，能够像我上述代码一样，天生挪用后端函数的模板代码，从而天真满足后端的一些需求（比方说，我的项目有静态化的需求，那末，静态化后的站内链接跟动态衬着的又会有所差别了）。

处置惩罚模板变量

这一块实在我要说的不多，不过就是依据后端模板引擎的划定规矩，输出变量、轮回输出变量、推断前提输出变量、挪用后端（模板引擎）函数调解输出变量。

关键是，我们须要拿到一份模板变量文档，跟API文档相似，它实际上也是一份前后端的数据协定。有了这份文档，我们才在后端未落成的情况下，进入动态页面革新阶段，并依据个中内容完成模板变量 mock。

争讨模板规划衬着权

关于运用模板规划体系对多个页面共有的部份完成复用，在之前的文章里已说起了，我设想该体系的思绪恰恰是来自于后端模板衬着。那末，在前后端均能够完成模板规划体系的前提下，我们应怎样选择呢？我的答案是，前端肯定要吃下来！

从前端的角度来看：

  • 我们在纯静态页面开辟阶段的产品就已是一个个完全的页面了，再要拆开并不实际。
  • 因为在webpack的辅佐下这套模板规划体系功用相称壮大，因而并没有给全部项目增加分外的本钱。

从后端的角度来看：

  • 服务器拼接多个HTML代码段自身也是有本钱（比方磁盘IO本钱）的，倒不如衬着一个完全的页面。
  • 在大众组件的分治管理上不会有很大变化，只不过之前是一个一个组件衬着好后再拼在一起，而现在是把各个组件的数据整合在一起来一致衬着罢了。

总结

在后端衬着的项目里运用webpack多页运用架构是相对可行的，可不要给老顽固们吓唬得又回到传统前端架构了。

示例代码

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

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

本文首发于
Array_Huang的手艺博客——
有用至上，非经作者赞同，请勿转载。

原文地点：
https://segmentfault.com/a/1190000008203380

如果您对本系列文章感兴趣，迎接关注定阅这里：
https://segmentfault.com/blog/array_huang

    原文作者：array_huang
    原文地址: https://segmentfault.com/a/1190000008203380
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞