介绍
简易html资源动态引入处理,支持引入参数替换变量,支持自定义模板渲染引擎
使用
npm install fis3-preprocessor-html-inline
fis
参数说明
compile
:null
自定义模板渲染引擎,为null
则使用简易变量替换,配合下方参数使用ld
:{{
语法标签(左)rd
:}}
语法标签(右)removeEmpty
:true
是否删除无数据变量
自定义模板渲染引擎
以art-template
为例:
const template = ;fis
暂不支持 art-template的include语法
参数数据载入规则
query载入变量
index.html
test.html
test: {{test}}user: {{user}}user0: {{user[0]}}
结果
test: 123user: 东东,丽丽user0: 东东
参数支持如下(由loader-utils修改而来):
-> Error
? -> {}
?flag -> { flag: "" }
?+flag -> { flag: true }
?-flag -> { flag: false }
?xyz=test -> { xyz: "test" }
?xyz=1 -> { xyz: "1" } // numbers are NOT parsed
?flag1&flag2 -> { flag1: "", flag2: "" }
?+flag1&-flag2 -> { flag1: true, flag2: false }
?flag1=true&flag2=false -> { flag1: true, flag2: false }
?xyz[]=a -> { xyz: ["a"] }
?xyz[]=a&xyz[]=b -> { xyz: ["a", "b"] }
?xyz[]=a&xyz[]=b&xyz[3]=d -> { xyz: ["a", "b", , "d"] }
?a%2C%26b=c%2C%26d -> { "a,&b": "c,&d" }
?{data:{a:1},isJSON5:true} -> { data: { a: 1 }, isJSON5: true }
__inline载入变量
index.html
user.html
你好 {{name}},你今年{{age}}岁咯!加油!
结果
你好 丽丽,你今年18岁咯!加油!
__inline载入json
user.html
你好 {{name}},你今年{{age}}岁咯!加油!
user.json
结果
你好 丽丽,你今年18岁咯!加油!
json文件路径查找顺序:当前文件、模板文件
无参数编译
默认无任何参数的情况下,本插件是不介入编译的,但是部分引入的页面不需要变量,而且引入的页面模板上又设置了变量,此时__inline=true
就能启动本插件进行编译