一款javascript模板引擎，简单，好用，支持webpack, rollup, parcel, browserify, fis和gulp
- JS原生语法，模版解析，编译，渲染
- 支持所有浏览器及Node，支持TypeScript
- 预编译支持主流打包工具
- 自定义配置、修饰符、函数
- 支持数据过滤
- 异常捕获功能
- 子模版
- 沙箱模式
- 支持JIT和AOT两种编译模式
- 提供cli集成化工具
- 提供编辑器插件支持
template.js是比拼接字符串更好的方式
模板例子
<ul>
<%for(var i = 0; i < list.length; i++) {%>
<li><%:=list[i].name%></li>
<%}%>
</ul>
数据例子
const data = {
list: [
{name: "yan"},
{name: "haijing"}
]
};渲染输出
<ul>
<li>yan</li>
<li>haijing</li>
</ul>template.js支持的编辑器插件
| 编辑器 | 插件 |
|---|---|
| Vscode | 高亮插件 |
| Sublime | 高亮插件 |
| Atom | 高亮插件 |
| WebStorm | TODO |
通过cli工具快速初始化项目
$ npx @templatejs/cli new myapp
# 选择对应的平台
# ❯ webpack4
# rollup
# parcel
# fis3
# browserify
# gulp
# browser 如果已有项目，可以选择对应的插件，template.js支持多种使用方式
| 平台 | 插件 |
|---|---|
| webpack | template-loader |
| rollup | rollup-plugin-templatejs |
| parcel | parcel-plugin-template |
| fis | fis-parser-template |
| browserify | browserify-templatejs |
| gulp | gulp-templatejs |
| 原生web与Node | template_js |
| 不支持的平台 | 可以自己写一个插件，请查看 @templatejs/precompiler |
其他packages简介
- @templatejs/runtime template.js 的运行时，给precompiler生成的渲染函数提供运行时支持
- @templatejs/parser template.js 的模板解析器
- template-vscode template.js 的vscode插件
本项目使用lerna来管理多个插件
安装lerna
$ npm install -g [email protected]lerna常用命令
$ lerna init # 初始化
$ lerna create @templatejs/parser # 创建一个package
$ lerna add yargs --scope=@templatejs/parser # 给package安装依赖
$ lerna list # 列出所有的包
$ lerna bootstrap # 安装全部依赖
$ lerna link # 建立全部软连接
$ lerna changed # 列出下次发版lerna publish 要更新的包
$ lerna publish # 会打tag，上传git,上传npm发布步骤，修改changelog
$ yarn test
$ yarn build
$ lerna publish想了解都有谁在使用，点击这里。