zl-loader

html模板引擎（AST）

目的

1. 简化artTemplate语法，打造简单实用的模板引擎

安装

1. npm i zl-loader -D

使用

1. 配置webpack, 不限于文件尾缀

module: {
    rules: [
        {
            test: /\.ejs$/,
            loader: 'zl-loader',
        },
        ...
    ]
}

1. 创建xxx.ejs文件

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%" viewBox="0 0 {{width}} {{height}}">
    {{ include('./defs.ejs') }}
</svg>

语法介绍

1. 赋值语句 {{xxx}}
2. 属性赋值语句 :x="xxxx"
3. 条件判断

    <div v-if="name">
    </div>
 
    <div v-if="value < 0">
    </div>

1. 循环

    <div v-for="x in data">
        {{x}}
    </div>
 
    <div v-for="(x, i) in data">
        {{x}} {{i}}
    </div>

1. 引入子模板

{{include('./defs.ejs')}}

1. 静态资源引入

{{require('./imgs/1.png')}}

升级记录

1.0.2 -> 1.0.3

1. 增加属性赋值语句
2. 循环指令修改z-for -> v-for
3. 条件指令修改z-if -> v-if

1.0.3 -> 1.0.4

1. 清理package.json的依赖