react使用art-template，我本来通过yarn安装到项目依赖中，结果发现webpack报错。
所以直接引入js文件的方式引入art-template.js

import React, { useEffect, useState } from 'react';
import * as APIS from '../service';

const Template = require('../template.js');

const template = `
<p>{{test}}</p>
`;

const CheckHealthInfoFrom: React.FC = (props) => {
  const [TemplateData, setTemplateData] = useState({
	test: "用于替换"	
});

  const renderResult = Template.compile(template);

  const html = renderResult(TemplateData);
  
  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </>
  );
};

export default CheckHealthInfoFrom;

art-template github https://github.com/aui/art-template

art-template常用语法 https://my.oschina.net/shuaihong/blog/2056422

art-tempalte常用方法 https://www.jq22.com/jquery-info1097

art-template.js源代码 需要的同学直接复制吧，网上很多都要钱

/*! art-template@4.13.1 for browser | https://github.com/aui/art-template */
!function(e,t){typeof exports==="object"&&typeof module==="object"?module.exports=t():typeof define==="function"&&define.amd?define([],t):typeof exports==="object"?exports.template=t():e.template=t()}(typeof self!=="undefined"?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;const i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){const n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,n){
const r=n(6); const i=n(2); const o=n(22); const s=function(e,t){t.onerror(e,t);const n=function(){return"{Template Error}"};return n.mappings=[],n.sourcesContent=[],n}; const a=function u(e){let t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};typeof e!=="string"?t=e:t.source=e,t=i.$extend(t),e=t.source,!0===t.debug&&(t.cache=!1,t.minimize=!1,t.compileDebug=!0),t.compileDebug&&(t.minimize=!1),t.filename&&(t.filename=t.resolveFilename(t.filename,t));const n=t.filename; const a=t.cache; const c=t.caches;if(a&&n){const l=c.get(n);if(l)return l}if(!e)try{e=t.loader(n,t),t.source=e}catch(m){const f=new o({name:"CompileError",path:n,message:`template not found: ${m.message}`,stack:m.stack});if(t.bail)throw f;return s(f,t)}let p=void 0; const h=new r(t);try{p=h.build()}catch(f){if(f=new o(f),t.bail)throw f;return s(f,t)}const d=function(e,n){try{return p(e,n)}catch(f){if(!t.compileDebug)return t.cache=!1,t.compileDebug=!0,u(t)(e,n);if(f=new o(f),t.bail)throw f;return s(f,t)()}};return d.mappings=p.mappings,d.sourcesContent=p.sourcesContent,d.toString=function(){return p.toString()},a&&n&&c.set(n,d),d};a.Compiler=r,e.exports=a},function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=/((['"])(?:(?!\2|\\).|\\(?:\r\n|[\s\S]))*(\2)?|`(?:[^`\\$]|\\[\s\S]|\$(?!\{)|\$\{(?:[^{}]|\{[^}]*\}?)*\}?)*(`)?)|(\/\/.*)|(\/\*(?:[^*]|\*(?!\/))*(\*\/)?)|(\/(?!\*)(?:\[(?:(?![\]\\]).|\\.)*\]|(?![\/\]\\]).|\\.)+\/(?:(?!\s*(?:\b|[\u0080-\uFFFF$\\'"~({]|[+\-!](?!=)|\.?\d))|[gmiyu]{1,5}\b(?![\u0080-\uFFFF$\\]|\s*(?:[+\-*%&|^<>!=?({]|\/(?![\/*])))))|(0[xX][\da-fA-F]+|0[oO][0-7]+|0[bB][01]+|(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?)|((?!\d)(?:(?!\s)[$\w\u0080-\uFFFF]|\\u[\da-fA-F]{4}|\\u\{[\da-fA-F]+\})+)|(--|\+\+|&&|\|\||=>|\.{3}|(?:[+\-\/%&|^]|\*{1,2}|<{1,2}|>{1,3}|!=?|={1,2})=?|[?~.,:;[\](){}])|(\s+)|(^$|[\s\S])/g,t.matchToToken=function(e){const t={type:"invalid",value:e[0]};return e[1]?(t.type="string",t.closed=!(!e[3]&&!e[4])):e[5]?t.type="comment":e[6]?(t.type="comment",t.closed=!!e[7]):e[8]?t.type="regex":e[9]?t.type="number":e[10]?t.type="name":e[11]?t.type="punctuator":e[12]&&(t.type="whitespace"),t}},function(e,t,n){
function r(){this.$extend=function(e){return e=e||{},o(e,e instanceof r?e:this)}}const i=n(10); var o=n(12); const s=n(13); const a=n(14); const u=n(15); const c=n(16); const l=n(17); const f=n(18); const p=n(19); const h=n(21); const d=typeof window==="undefined"; const m={source:null,filename:null,rules:[f,l],escape:!0,debug:!!d&&process.env.NODE_ENV!=="production",bail:!0,cache:!0,minimize:!0,compileDebug:!1,resolveFilename:h,include:s,htmlMinifier:p,htmlMinifierOptions:{collapseWhitespace:!0,minifyCSS:!0,minifyJS:!0,ignoreCustomFragments:[]},onerror:a,loader:c,caches:u,root:"/",extname:".art",ignore:[],imports:i};r.prototype=m,e.exports=new r},function(e,t){},function(e,t,n){
const r=n(5); const i=n(0); const o=n(23); const s=function(e,t){return t instanceof Object?r({filename:e},t):i({filename:e,source:t})};s.render=r,s.compile=i,s.defaults=o,e.exports=s},function(e,t,n){
const r=n(0); const i=function(e,t,n){return r(e,n)(t)};e.exports=i},function(e,t,n){
function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}const s=function(){function e(e,t){for(let n=0;n<t.length;n++){const r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(); const a=n(7); const u=n(9); const c="$data"; const l="$imports"; const f="print"; const p="include"; const h="extend"; const d="block"; const m="$$out"; const v="$$line"; const g="$$blocks"; const y="$$slice"; const b="$$from"; const w="$$options"; const x=function(e,t){return Object.hasOwnProperty.call(e,t)}; const k=JSON.stringify; const E=function(){function e(t){let n; let s; const a=this;o(this,e);let x=t.source; const k=t.minimize; const E=t.htmlMinifier;if(this.options=t,this.stacks=[],this.context=[],this.scripts=[],this.CONTEXT_MAP={},this.ignore=[c,l,w].concat(i(t.ignore)),this.internal=(n={},r(n,m,"''"),r(n,v,"[0,0]"),r(n,g,"arguments[1]||{}"),r(n,b,"null"),r(n,f,`function(){var s=''.concat.apply('',arguments);${m}+=s;return s}`),r(n,p,`function(src,data){var s=${w}.include(src,data||${c},arguments[2]||${g},${w});${m}+=s;return s}`),r(n,h,`function(from){${b}=from}`),r(n,y,`function(c,p,s){p=${m};${m}='';c();s=${m};${m}=p+s;return s}`),r(n,d,`function(){var a=arguments,s;if(typeof a[0]==='function'){return ${y}(a[0])}else if(${b}){if(!${g}[a[0]]){${g}[a[0]]=${y}(a[1])}else{${m}+=${g}[a[0]]}}else{s=${g}[a[0]];if(typeof s==='string'){${m}+=s}else{s=${y}(a[1])}return s}}`),n),this.dependencies=(s={},r(s,f,[m]),r(s,p,[m,w,c,g]),r(s,h,[b,p]),r(s,d,[y,b,m,g]),s),this.importContext(m),t.compileDebug&&this.importContext(v),k)try{x=E(x,t)}catch(T){}this.source=x,this.getTplTokens(x,t.rules,this).forEach(function(e){e.type===u.TYPE_STRING?a.parseString(e):a.parseExpression(e)})}return s(e,[{key:"getTplTokens",value(){return u.apply(undefined,arguments)}},{key:"getEsTokens",value(e){return a(e)}},{key:"getVariables",value(e){let t=!1;return e.filter(function(e){return e.type!=="whitespace"&&e.type!=="comment"}).filter(function(e){return e.type==="name"&&!t||(t=e.type==="punctuator"&&e.value===".",!1)}).map(function(e){return e.value})}},{key:"importContext",value(e){const t=this; let n=""; const r=this.internal; const i=this.dependencies; const o=this.ignore; const s=this.context; const a=this.options; const u=a.imports; const f=this.CONTEXT_MAP;x(f,e)||o.indexOf(e)!==-1||(x(r,e)?(n=r[e],x(i,e)&&i[e].forEach(function(e){return t.importContext(e)})):n=e==="$escape"||e==="$each"||x(u,e)?`${l}.${e}`:`${c}.${e}`,f[e]=n,s.push({name:e,value:n}))}},{key:"parseString",value(e){const t=e.value;if(t){const n=`${m}+=${k(t)}`;this.scripts.push({source:t,tplToken:e,code:n})}}},{key:"parseExpression",value(e){const t=this; const n=e.value; const r=e.script; const i=r.output; const o=this.options.escape; let s=r.code;i&&(s=!1===o||i===u.TYPE_RAW?`${m}+=${r.code}`:`${m}+=$escape(${r.code})`);const a=this.getEsTokens(s);this.getVariables(a).forEach(function(e){return t.importContext(e)}),this.scripts.push({source:n,tplToken:e,code:s})}},{key:"checkExpression",value(e){for(let t=[[/^\s*}[\w\W]*?{?[\s;]*$/,""],[/(^[\w\W]*?\([\w\W]*?(?:=>|\([\w\W]*?\))\s*{[\s;]*$)/,"$1})"],[/(^[\w\W]*?\([\w\W]*?\)\s*{[\s;]*$)/,"$1}"]],n=0;n<t.length;){if(t[n][0].test(e)){var r;e=(r=e).replace.apply(r,i(t[n]));break}n++}try{return new Function(e),!0}catch(o){return!1}}},{key:"build",value(){const e=this.options; const t=this.context; const n=this.scripts; const r=this.stacks; const i=this.source; const o=e.filename; const s=e.imports; const a=[]; const f=x(this.CONTEXT_MAP,h); let d=0; const y=function(e,t){const n=t.line; const i=t.start; const o={generated:{line:r.length+d+1,column:1},original:{line:n+1,column:i+1}};return d+=e.split(/\n/).length-1,o}; const E=function(e){return e.replace(/^[\t ]+|[\t ]$/g,"")};r.push(`function(${c}){`),r.push("'use strict'"),r.push(`${c}=${c}||{}`),r.push(`var ${t.map(function(e){return `${e.name}=${e.value}`}).join(",")}`),e.compileDebug?(r.push("try{"),n.forEach(function(e){e.tplToken.type===u.TYPE_EXPRESSION&&r.push(`${v}=[${[e.tplToken.line,e.tplToken.start].join(",")}]`),a.push(y(e.code,e.tplToken)),r.push(E(e.code))}),r.push("}catch(error){"),r.push(`throw {${["name:'RuntimeError'",`path:${k(o)}`,"message:error.message",`line:${v}[0]+1`,`column:${v}[1]+1`,`source:${k(i)}`,"stack:error.stack"].join(",")}}`),r.push("}")):n.forEach(function(e){a.push(y(e.code,e.tplToken)),r.push(E(e.code))}),f&&(r.push(`${m}=''`),r.push(`${p}(${b},${c},${g})`)),r.push(`return ${m}`),r.push("}");const T=r.join("\n");try{const O=new Function(l,w,`return ${T}`)(s,e);return O.mappings=a,O.sourcesContent=[i],O}catch(P){for(var $=0,j=0,_=0,S=void 0;$<n.length;){const C=n[$];if(!this.checkExpression(C.code)){j=C.tplToken.line,_=C.tplToken.start,S=C.code;break}$++}throw{name:"CompileError",path:o,message:P.message,line:j+1,column:_+1,source:i,generated:S,stack:P.stack}}}}]),e}();E.CONSTS={DATA:c,IMPORTS:l,PRINT:f,INCLUDE:p,EXTEND:h,BLOCK:d,OPTIONS:w,OUT:m,LINE:v,BLOCKS:g,SLICE:y,FROM:b,ESCAPE:"$escape",EACH:"$each"},e.exports=E},function(e,t,n){
const r=n(8); const i=n(1).default; const o=n(1).matchToToken; const s=function(e){return e.match(i).map(function(e){return i.lastIndex=0,o(i.exec(e))}).map(function(e){return e.type==="name"&&r(e.value)&&(e.type="keyword"),e})};e.exports=s},function(e,t,n){
const r={"abstract":!0,await:!0,"boolean":!0,"break":!0,"byte":!0,"case":!0,"catch":!0,"char":!0,"class":!0,"const":!0,"continue":!0,"debugger":!0,"default":!0,"delete":!0,"do":!0,"double":!0,"else":!0,"enum":!0,"export":!0,"extends":!0,"false":!0,"final":!0,"finally":!0,"float":!0,"for":!0,"function":!0,"goto":!0,"if":!0,"implements":!0,"import":!0,"in":!0,"instanceof":!0,"int":!0,"interface":!0,"let":!0,"long":!0,"native":!0,"new":!0,"null":!0,"package":!0,"private":!0,"protected":!0,"public":!0,"return":!0,"short":!0,"static":!0,"super":!0,"switch":!0,"synchronized":!0,"this":!0,"throw":!0,"transient":!0,"true":!0,"try":!0,"typeof":!0,"var":!0,"void":!0,"volatile":!0,"while":!0,"with":!0,"yield":!0};e.exports=function(e){return r.hasOwnProperty(e)}},function(e,t,n){
function r(e){const t=new String(e.value);return t.line=e.line,t.start=e.start,t.end=e.end,t}function i(e,t,n){this.type=e,this.value=t,this.script=null,n?(this.line=n.line+n.value.split(/\n/).length-1,this.line===n.line?this.start=n.end:this.start=n.value.length-n.value.lastIndexOf("\n")-1):(this.line=0,this.start=0),this.end=this.start+this.value.length}const o=function(e,t){for(var n=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{},o=[new i("string",e)],s=0;s<t.length;s++)for(let a=t[s],u=a.test.ignoreCase?"ig":"g",c=new RegExp(a.test.source,u),l=0;l<o.length;l++){const f=o[l]; let p=o[l-1];if(f.type==="string"){for(var h=void 0,d=0,m=[],v=f.value;(h=c.exec(v))!==null;)h.index>d&&(p=new i("string",v.slice(d,h.index),p),m.push(p)),p=new i("expression",h[0],p),h[0]=r(p),p.script=a.use.apply(n,h),m.push(p),d=h.index+h[0].length;d<v.length&&(p=new i("string",v.slice(d),p),m.push(p)),o.splice.apply(o,[l,1].concat(m)),l+=m.length-1}}return o};o.TYPE_STRING="string",o.TYPE_EXPRESSION="expression",o.TYPE_RAW="raw",o.TYPE_ESCAPE="escape",e.exports=o},function(e,t,n){
(function(t){function n(e){return typeof e!=="string"&&(e=e===undefined||e===null?"":typeof e==="function"?n(e.call(e)):JSON.stringify(e)),e}function r(e){const t=`${e}`; const n=s.exec(t);if(!n)return e;let r=""; let i=void 0; let o=void 0; let a=void 0;for(i=n.index,o=0;i<t.length;i++){switch(t.charCodeAt(i)){case 34:a="&#34;";break;case 38:a="&#38;";break;case 39:a="&#39;";break;case 60:a="&#60;";break;case 62:a="&#62;";break;default:continue}o!==i&&(r+=t.substring(o,i)),o=i+1,r+=a}return o!==i?r+t.substring(o,i):r}/*! art-template@runtime | https://github.com/aui/art-template */
const i=typeof self!=="undefined"?self:typeof window!=="undefined"?window:void 0!==t?t:{}; const o=Object.create(i); var s=/["&'<>]/;o.$escape=function(e){return r(n(e))},o.$each=function(e,t){if(Array.isArray(e))for(let n=0,r=e.length;n<r;n++)t(e[n],n);else for(const i in e)t(e[i],i)},e.exports=o}).call(t,n(11))},function(e,t){let n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(r){typeof window==="object"&&(n=window)}e.exports=n},function(e,t,n){
const r=Object.prototype.toString; const i=function(e){return e===null?"Null":r.call(e).slice(8,-1)}; const o=function s(e,t){let n=void 0; const r=i(e);if(r==="Object"?n=Object.create(t||{}):r==="Array"&&(n=[].concat(t||[])),n){for(const o in e)Object.hasOwnProperty.call(e,o)&&(n[o]=s(e[o],n[o]));return n}return e};e.exports=o},function(e,t,n){
const r=function(e,t,r,i){const o=n(0);return i=i.$extend({filename:i.resolveFilename(e,i),bail:!0,source:null}),o(i)(t,r)};e.exports=r},function(e,t,n){
const r=function(e){console.error(e.name,e.message)};e.exports=r},function(e,t,n){
const r={__data:Object.create(null),set(e,t){this.__data[e]=t},get(e){return this.__data[e]},reset(){this.__data={}}};e.exports=r},function(e,t,n){
const r=typeof window==="undefined"; const i=function(e){if(r){return n(3).readFileSync(e,"utf8")}const t=document.getElementById(e);return t.value||t.innerHTML};e.exports=i},function(e,t,n){
var r={test:/{{([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/,use(e,t,n,i){const o=this; const s=o.options; const a=o.getEsTokens(i); const u=a.map(function(e){return e.value}); const c={}; let l=void 0; let f=!!t&&"raw"; let p=n+u.shift(); const h=function(t,n){console.warn(`${s.filename||"anonymous"}:${e.line+1}:${e.start+1}\nTemplate upgrade: {{${t}}} -> {{${n}}}`)};switch(t==="#"&&h("#value","@value"),p){case"set":i=`var ${u.join("").trim()}`;break;case"if":i=`if(${u.join("").trim()}){`;break;case"else":var d=u.indexOf("if");~d?(u.splice(0,d+1),i=`}else if(${u.join("").trim()}){`):i="}else{";break;case"/if":i="}";break;case"each":l=r._split(a),l.shift(),l[1]==="as"&&(h("each object as value index","each object value index"),l.splice(1,1));i=`$each(${l[0]||"$data"},function(${l[1]||"$value"},${l[2]||"$index"}){`;break;case"/each":i="})";break;case"block":l=r._split(a),l.shift(),i=`block(${l.join(",").trim()},function(){`;break;case"/block":i="})";break;case"echo":p="print",h("echo value","value");case"print":case"include":case"extend":if(u.join("").trim().indexOf("(")!==0){l=r._split(a),l.shift(),i=`${p}(${l.join(",")})`;break}default:if(~u.indexOf("|")){const m=a.reduce(function(e,t){const n=t.value; const r=t.type;return n==="|"?e.push([]):r!=="whitespace"&&r!=="comment"&&(e.length||e.push([]),n===":"&&e[e.length-1].length===1?h("value | filter: argv","value | filter argv"):e[e.length-1].push(t)),e},[]).map(function(e){return r._split(e)});i=m.reduce(function(e,t){const n=t.shift();return t.unshift(e),`$imports.${n}(${t.join(",")})`},m.shift().join(" ").trim())}f=f||"escape"}return c.code=i,c.output=f,c},_split(e){e=e.filter(function(e){const t=e.type;return t!=="whitespace"&&t!=="comment"});for(var t=0,n=e.shift(),r=/\]|\)/,i=[[n]];t<e.length;){const o=e[t];o.type==="punctuator"||n.type==="punctuator"&&!r.test(n.value)?i[i.length-1].push(o):i.push([o]),n=o,t++}return i.map(function(e){return e.map(function(e){return e.value}).join("")})}};e.exports=r},function(e,t,n){
const r={test:/<%(#?)((?:==|=#|[=-])?)[ \t]*([\w\W]*?)[ \t]*(-?)%>/,use(e,t,n,r){return n={"-":"raw","=":"escape","":!1,"==":"raw","=#":"raw"}[n],t&&(r=`/*${r}*/`,n=!1),{code:r,output:n}}};e.exports=r},function(e,t,n){
function r(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}const i=typeof window==="undefined"; const o=function(e,t){if(i){let o; const s=n(20).minify; const a=t.htmlMinifierOptions; const u=t.rules.map(function(e){return e.test});(o=a.ignoreCustomFragments).push.apply(o,r(u)),e=s(e,a)}return e};e.exports=o},function(e,t){!function(e){e.noop=function(){}}(typeof e==="object"&&typeof e.exports==="object"?e.exports:window)},function(e,t,n){
const r=typeof window==="undefined"; const i=/^\.+\//; const o=function(e,t){if(r){const o=n(3); const s=t.root; const a=t.extname;if(i.test(e)){const u=t.filename; const c=!u||e===u; const l=c?s:o.dirname(u);e=o.resolve(l,e)}else e=o.resolve(s,e);o.extname(e)||(e+=a)}return e};e.exports=o},function(e,t,n){
function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||typeof t!=="object"&&typeof t!=="function"?e:t}function o(e,t){if(typeof t!=="function"&&t!==null)throw new TypeError(`Super expression must either be null or a function, not ${typeof t}`);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){const t=e.name; const n=e.source; const r=e.path; const i=e.line; const o=e.column; const s=e.generated; const a=e.message;if(!n)return a;const u=n.split(/\n/); const c=Math.max(i-3,0); const l=Math.min(u.length,i+3); const f=u.slice(c,l).map(function(e,t){const n=t+c+1;return`${(n===i?" >> ":"    ")+n}| ${e}`}).join("\n");return`${r||"anonymous"}:${i}:${o}\n${f}\n\n${t}: ${a}${s?`\n   generated: ${s}`:""}`}const a=function(e){function t(e){r(this,t);const n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e.message));return n.name="TemplateError",n.message=s(e),Error.captureStackTrace&&Error.captureStackTrace(n,n.constructor),n}return o(t,e),t}(Error);e.exports=a},function(e,t,n){
e.exports=n(2)}])});