0.1.3 • Published 5 months ago
build-plugin-tpl-render v0.1.3
build-plugin-tpl-render
适用于 ice@2 应用框架,基于 build-script 插件体系扩展的模板配置变量注入渲染插件。
Feature
- ✅ thymeleaf 模板及变量配置
- ✅ mustache 模板及变量配置
- ✅ ejs 模板及变量配置(html-webpack-plugin 默认支持)
Install
npm i build-plugin-tpl-render -D
Usage
build.json 插件配置
{
"plugins": [
[
"build-plugin-tpl-render",
{
"type": "thymeleaf", // 可为:thymeleaf和ejs,默认ejs,可不填
"tplVars": {}, // 自定义模板变量,默认为{},可不填
"tplFile": "public/index.html", // 模板文件路径,以当前工程根目录为基准,默认public/index.html,可不填
"htmlWebpackPluginOpts": {}, // html webpack plugin options 配置
"htmlLoaderMinimize": {} // html loader minimize options配置
}
]
]
}
build.config.js 插件配置
// build.config.js
module.exports = {
plugins: [
[
"build-plugin-tpl-render",
{
type: "thymeleaf", // 可为:thymeleaf和ejs,默认ejs,可不填
tplVars: {}, // 自定义模板变量,默认为{},可不填
tplFile: "public/index.html", // 模板文件路径,以当前工程根目录为基准,默认public/index.html,可不填
htmlWebpackPluginOpts: {}, // html webpack plugin options 配置
htmlLoaderMinimize: {}, // html loader minimize options配置
},
],
],
};
如果 tplVars 变量很多需要单独配置,可以新建一个tplConfig.js
配置文件,内容示例如下:
// tplConfig.js
module.exports = {
b: 2,
// 公共js
commonJs: [
{
src: "//cdn.com/xxx.js",
},
],
// 公共css
commonCss: [
{
href: "//cdn.com/yyy.css",
},
],
};
// build.config.js
const tplVars = require("./tplConfig.js");
module.exports = {
plugins: [
[
"build-plugin-tpl-render",
{
type: "thymeleaf", // 可为:thymeleaf和ejs,默认ejs,可不填
tplVars, // 自定义模板变量,默认为{},可不填
tplFile: "public/index.html", // 模板文件路径,以当前工程根目录为基准,默认public/index.html,可不填
htmlWebpackPluginOpts: {}, // html webpack plugin options 配置
htmlLoaderMinimize: {}, // html loader minimize options配置
},
],
],
};
模板说明
- 开发阶段会自动注入入口 js 和 css 文件,也可自定义手动注入,之后在模板中加入入口 js 和 css。
{
"plugins": [
[
"build-plugin-tpl-render",
{
"tplVars": {
"a": 1
},
"htmlWebpackPluginOpts": {
"inject": false // 禁止自动注入入口脚本
}
}
]
]
}
- 若服务端需要加载前端模板渲染,如有特殊的配置要求,可以新增
index.[type].html
单独编辑作为服务端渲染文件。
thymeleaf 模板说明
开发时模板(默认自动注入入口脚本)示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta
name="viewport"
content="width=device-width,viewport-fit=cover,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title th:if="${title}" th:text="${title}"></title>
<link rel="icon" th:if="${icon}" th:href="${icon}" type="image/x-icon" />
<!-- commonCss -->
<link
rel="stylesheet"
type="text/css"
th:each="link:${commonCss}"
th:if="${link.href}"
th:href="${link.href}"
/>
</head>
<body>
<div id="root-qiankun-container"></div>
<div id="root-slave"></div>
<script th:inline="javascript">
/*<![CDATA[*/
window.configs = /*[[${configs}]]*/ {};
window.menus = /*[[${menus}]]*/ {};
/* ]]> */
</script>
<!-- commonJs -->
<script
th:each="script:${commonJs}"
th:if="${script.src}"
th:src="${script.src}"
></script>
</body>
</html>
ejs 模板
开发时模板(默认自动注入入口脚本)示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta
name="viewport"
content="width=device-width,viewport-fit=cover,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title><%= title %></title>
<!-- commonCss -->
<% if (commonCss && commonCss.length) { %> <% for (var i = 0; i <
commonCss.length; i++) { %>
<link rel="stylesheet" type="text/css" href="<%= commonCss[i].href %>" />
<% } %> <% } %>
</head>
<body>
<div id="root-qiankun-container"></div>
<div id="root-slave"></div>
<script>
window.configs = <%= JSON.stringify(configs || {}) %>;
window.menu = <%= JSON.stringify(menus || {}) %>;
</script>
<!-- commonJs -->
<% if (commonJs && commonJs.length) { %> <% for (var i = 0; i <
commonJs.length; i++) { %>
<script src="<%= commonJs[i].src %>"></script>
<% } %> <% } %>
</body>
</html>
mustache 模板
开发时模板(默认自动注入入口脚本)示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta
name="viewport"
content="width=device-width,viewport-fit=cover,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>{{{title}}}{{^title}}通义行业大模型{{/title}}</title>
<!-- commonCss -->
{{#commonCss}} {{#href}}
<link rel="stylesheet" href="{{{.}}}" />
{{/href}} {{/commonCss}}
</head>
<body>
<div id="root-qiankun-container"></div>
<div id="root-slave"></div>
<script>
window.configs = {{configs}}{{^configs}}{}{{/configs}};
window.menus = {{menus}}{{^menus}}{}{{/menus}};
</script>
<!-- commonJs -->
{{#commonJs}} {{#src}}
<script src="{{{.}}}"></script>
{{/src}} {{/commonJs}}
</body>
</html>