Nocturnal Practitioners of Magic
Miss any of our Open RFC calls?Watch the recordings here! »

zl-loader

1.0.4 • Public • Published

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的依赖

Install

npm i zl-loader

DownloadsWeekly Downloads

1

Version

1.0.4

License

ISC

Unpacked Size

21 kB

Total Files

22

Last publish

Collaborators

  • avatar