English | 简体中文
一款 javascript 模板引擎，简单，好用，支持 webpack, rspack, vite, esbuild, rollup, parcel, browserify, fis 和 gulp。
- JS 原生语法，模版解析，编译，渲染
- 支持所有浏览器及 Node，支持 TypeScript
- 预编译支持主流打包工具
- 自定义配置、修饰符、函数
- 支持数据过滤
- 异常捕获功能
- 子模版
- 沙箱模式
- 支持 JIT 和 AOT 两种编译模式
- 提供 cli 集成化工具
- 提供编辑器插件支持
template.js 是比拼接字符串更好的方式，点击使用codesandbox快速体验效果。
模板例子
<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
# 选择对应的平台
# ❯ webpack
# rspack
# vite
# rollup
# esbuild
# parcel2
# parcel1
# fis3
# browserify
# gulp
# browser如果已有项目，可以选择对应的插件，template.js 支持多种使用方式
| 平台 | 插件 |
|---|---|
| webpack / rspack | template-loader |
| vite / rollup | rollup-plugin-templatejs |
| esbuild | esbuild-plugin-templatejs |
| parcel2 | parcel-transformer-template |
| parcel1 | parcel-plugin-template |
| fis | fis-parser-template |
| browserify | browserify-templatejs |
| gulp | gulp-templatejs |
| 原生 web 与 Node.js | template_js |
| 不支持的平台 | 可以自己写一个插件，请查看 @templatejs/precompiler |
其他 packages 简介
- @templatejs/runtime template.js 的运行时，给 precompiler 生成的渲染函数提供运行时支持
- @templatejs/parser template.js 的模板解析器
- template-vscode template.js 的 vscode 插件
本项目使用 lerna 来管理多个插件，lerna 常用命令如下，注意这里不能缺省npx前缀：
$ npx lerna init # 初始化
$ npx lerna create @templatejs/parser # 创建一个package
$ npx lerna add yargs --scope=@templatejs/parser # 给package安装依赖
$ npx lerna list # 列出所有的包
$ npx lerna bootstrap # 安装全部依赖
$ npx lerna link # 建立全部软连接
$ npx lerna changed # 列出下次发版lerna publish 要更新的包
$ npx lerna publish # 会打tag，上传git, 上传npm发布步骤，修改 changelog
$ yarn lint
$ yarn build
$ yarn test
$ npx lerna publish # 正式包不打 tag 发包，适合测试包
$ yarn lint
$ yarn build
$ yarn test
$ lerna version --no-git-tag-version # 修改版本号，不打tag
$ npx lerna publish from-package --dist-tag next # 测试包想了解都有谁在使用，点击这里。