80 lines
2.4 KiB
Markdown
80 lines
2.4 KiB
Markdown
|
---
|
|||
|
|
name: jjb-html-template-config
|
|||
|
|
description: 定义 JJB 项目 HTML 模板配置规范。在配置 jjb.config.js 的 windowInject、注入 CSS/JS 链接或设置应用挂载点时使用。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 应用配置与开发环境
|
|||
|
|
|
|||
|
|
## HTML 模板配置
|
|||
|
|
|
|||
|
|
- **配置来源**：HTML 模板配置来源于根目录 `jjb.config.js` 文件中的 `windowInject` 属性
|
|||
|
|
|
|||
|
|
- **配置结构**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// jjb.config.js
|
|||
|
|
{
|
|||
|
|
windowInject: {
|
|||
|
|
// 应用标题
|
|||
|
|
title: '微应用',
|
|||
|
|
// 注入 CSS 链接集合
|
|||
|
|
links: ['https://test.test.com/index.js'],
|
|||
|
|
element: {
|
|||
|
|
root: {
|
|||
|
|
// 挂载 DOM 元素 ID
|
|||
|
|
id: 'root',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// 注入 JS 链接集合
|
|||
|
|
scripts: ['https://test.test.com/index.js'],
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **配置说明**：
|
|||
|
|
|
|||
|
|
- **title**：应用标题，会注入到 HTML 模板的 `<title>` 标签中
|
|||
|
|
|
|||
|
|
- **links**：CSS 样式文件链接数组，用于在 HTML 头部注入外部样式表
|
|||
|
|
|
|||
|
|
- **element.root.id**：React 应用挂载的 DOM 元素 ID，默认为 `'root'`
|
|||
|
|
|
|||
|
|
- **scripts**：JavaScript 文件链接数组，用于在 HTML 中注入外部脚本文件
|
|||
|
|
|
|||
|
|
- **模板使用方式**：在 `index.html` 模板中通过 EJS 模板语法访问配置
|
|||
|
|
|
|||
|
|
- **变量注入**：`windowInject` 配置会注入到 `htmlWebpackPlugin.options` 中，需要在模板中先解构获取变量
|
|||
|
|
|
|||
|
|
- **模板示例**：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- 解构配置变量 -->
|
|||
|
|
<% var { links, scripts, element, title } = htmlWebpackPlugin.options %>
|
|||
|
|
|
|||
|
|
<!-- 注入 CSS 链接 -->
|
|||
|
|
<% for (const item of links) { %>
|
|||
|
|
<link type="text/css" rel="stylesheet" href="<%= item %>"></link>
|
|||
|
|
<% } %>
|
|||
|
|
|
|||
|
|
<!-- 注入 JS 脚本 -->
|
|||
|
|
<% for (const item of scripts) { %>
|
|||
|
|
<script src="<%= item %>" type="text/javascript"></script>
|
|||
|
|
<% } %>
|
|||
|
|
|
|||
|
|
<!-- 使用元素配置 -->
|
|||
|
|
<% const { root } = element; %>
|
|||
|
|
<div id="<%= root.id %>" style="width: 100%; height: 100%; position: relative"></div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **变量说明**：
|
|||
|
|
|
|||
|
|
- `links`：对应配置中的 `links` 数组，用于循环注入 CSS 链接
|
|||
|
|
|
|||
|
|
- `scripts`：对应配置中的 `scripts` 数组，用于循环注入 JS 脚本
|
|||
|
|
|
|||
|
|
- `element`：对应配置中的 `element` 对象，用于访问挂载元素配置
|
|||
|
|
|
|||
|
|
- `title`：对应配置中的 `title` 字符串，可用于设置页面标题
|
|||
|
|
|
|||
|
|
- **使用场景**：适用于需要在 HTML 模板中动态注入外部资源（CSS、JS）或配置应用挂载点的场景
|