多页应用 MPA
icejs 默认的应用类型是 SPA 单页应用,但在某些业务场景下存在 MPA 多页应用的诉求,基于此 icejs 内置提供了 MPA 的方案。
#
工程配置在工程配置文件 build.json
中开启 MPA 应用配置:
#
目录结构MPA 应用以页面为维度进行划分,符合 src/pages/*/[index|app].[ts|js]
的路径都会作为一个单独的 entry,整体结构:
如上结构,开启 mpa 之后将会包含 dashboard、about 两个 entry。
#
不同的 entry 应用类型pages 下的每个 entry 可以是一个单独的 SPA,也可以是简单的一个页面组件,具体可以结合业务情况使用。
#
SPA 类型的 entrySPA 类型的 entry 整体跟 icejs 的 SPA 应用基本接近,包含 app.js
, routes.js
等文件。
目录结构:
应用入口:
MPA 场景下不支持某个页面使用文件路由(约定路由),仅支持配置式路由
仅支持通过
src/routes
配置路由,不支持直接配置router.routes: [{}]
接下来配置路由信息:
#
组件类型的 entry如果只是渲染一个简单的组件/页面,直接在 index.tsx
中导出组件即可:
如果有 export default
那么框架会自动调用 ReactDOM.render
渲染组件,如果希望自行渲染组件的话则不需要通过 export default
导出组件。
#
指定不同 entry 的 HTML 模板默认情况下,entryName 为 dashboard 的入口会优先使用 public/dashboard.html
作为 HTML 模板,如果该文件不存在则会使用 public/index.html
兜底。
同时 icejs 也支持通过 template
字段更加灵活的指定 HTML 模板:
注意:通过
entry
字段配置的多页应用不支持配置mpa.template
字段。
#
高级用法#
调试时指定单个 entry默认 MPA 应用在开发阶段会启动所有页面,如果你只想调试某个页面,可以通过指定 --mpa-entry
来启动。
#
EJS 模版默认情况下 MPA 使用 public/index.html
作为 HTML 模版,如果存在一些简单的差异化渲染逻辑,可以通过 EJS 语法进行渲染。
可使用变量:
- NODE_ENV:可选值为
development | production
用来区分 start / build 命令 - pageName:当前渲染页面的页面名称,默认为 src/pages 目录下的一级目录名(默认小写)
html 中使用 EJS 语法:
#
指定调试时浏览器默认打开的页面可以通过配置 openPage
指定多个页面时默认打开指定的页面。
注意:通过
entry
字段配置的多页应用不支持配置mpa.openPage
字段。
#
指定调试时的路径本地开发默认以 pages 下的目录名为调试路径,比如 src/pages/Dashboard
下的 MPA 页面,在调试时将默认在 http://localhost:3333/dashboard
进行调试。
如果希望调试路径和最终部署时的路径一致,可以通过配置 rewrites
参数:
上述的配置可以让 MPA 页面在 http://localhost:3333/site/dashboard
下进行调试,前端路由的 basename 可以同该路径保持一致,这样可以确保部署后无需额外针对 basename
进行的订正。
如果 MPA 页面中不耦合路由,则不需要关心 rewrite 逻辑
#
通过 entry 字段更加灵活的开启 MPAmpa: true
是 icejs 推荐的 MPA 最佳实践,但有一些场景可能会更加灵活,比如应用整体还是一个大的 SPA 应用,只是需要增加一个轻量的 entry,这时候可以直接在 build.json
中配置 entry 字段:
对应目录结构:
LoginEntry.jsx
需要自行调用 ReactDOM.render()
渲染。