build-plugin-tpl-render

v0.1.3

Published

2 years ago

模板渲染插件

0High
0Medium
0Low

xiazhiqiang

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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

build-plugin-tpl-render

Feature

Install

Usage

build.json 插件配置

build.config.js 插件配置

模板说明

thymeleaf 模板说明

ejs 模板

mustache 模板