如何使用混合webapp(MPA和SPA组合)

Question

使用现代JS框架构建多页面应用程序的好方法是什么？

多页面应用程序

在多页面应用程序中,我们有多个模板使用一些"模板语法"来为我们提供后端数据和AJAX(如果需要)或高级UX voodoo通常由jQuery处理.

单页面应用程序

在单页面应用程序中,"后端数据"由AJAX请求和整个路由提供,前端逻辑由JS处理.我们经常使用像Angular或React这样的JS框架,并使用webpack或gulp等任务运行器/捆绑器编译我们的源代码.

混合应用

但网络上最受欢迎的似乎是混合应用程序.使用这样的应用程序时,典型的构建工作流程是什么？我找不到任何教程或指南.

所以要具体一点.我想象webapp在哪里,每个页面都必须编译并可以共享一些资源.每个页面都有自己的JS路由,如向导或子组件.在页面加载和AJAX期间加载数据.

例如,我的webapp将有3页:

• 访客页面 - 将为网站用户提供有限的内容并吸引他注册
• 用户 - 将为已签名的网站用户提供完整的内容,资源将扩展到访客内容
• admin - 仅共享样式和webapp"核心"

任务运行器/捆绑器

例如,在webpack中有一种指定多个入口和输出点的方法吗？也许更好的方法是拥有多个webpack/gulp配置.在那种情况下,如果我有很多页面,我将不得不为每个页面编写webpack/gulp配置,即使它们中的一些可能完全相同.如何运行这种构建？

共享资源

浏览器是否会在相同的域内使用相同的散列(如bundle.a2k4jn2.js)加载缓存的js包但不同的地址？如果是这样,如何在webpack或gulp等工具中指定这样的行为.我听说CommonsChunkPlugin但不确定如何使用它,甚至我正在寻找正确的方向.

模板

如果我想加载一些"后端"数据而不是通过AJAX但是在页面加载时该怎么办？当然,每个模板引擎都能让我们直接在JSP或PHP等html模板中编写本机代码.但是如果某些路由由JS处理并且"模板标记"在初始加载时对页面不可见,那么模板将不会被编译.有时服务器和客户端中的模板引擎可能具有相同的特殊标记,如Blade和Angular,这可能会导致冲突.

目录结构

我想在混合应用程序的前端和后端将紧密耦合.在混合应用程序中共享JS可能会导致非常复杂的导入(在es6或html脚本标记中).如何保持简单.

部署

部署应用程序怎么样？在java中它很容易,因为我们只是在构建工具(maven,gradle)中指定目录(编译页面),它们被复制到jar/war,但在PHP源代码中没有编译如何保持"js source"远离生产我不能除了编写自己的批处理/ bash脚本之外,想象一下合理的解决

摘要

我已经提到了具体的技术和框架.但我的问题是关于使用这种webapp的常用方法,而不是"如何使用该工具".虽然代码示例将非常感激.

Answer 1

这个问题有很多内容，作为起点，您可以在 webpack 中定义多个入口点。

\n

https://webpack.js.org/concepts/entry-points/

\n

如果你想在 FE 和 BE 之间混合数据加载，那么你确实需要编写一个同构 JS 应用程序并使用 Node 作为你的 BE，否则你\xe2\x80\x99最终会用不同的语言将所有内容编写两次，并且曾经遇到过像这样的项目，相信我，你真的想避免这种情况。

\n

关于共享资源的这个问题的另一部分最好由 WebPack\xe2\x80\x99s 捆绑拆分来回答，这是针对此处提出的问题而设计的

\n

https://webpack.js.org/guides/code-splitting/

\n