English | 简体中文
A javascript template engine that is simple, easy to use, and supports webpack, rspack, vite, esbuild, rollup, parcel, browserify, fis, and gulp.
- Native JS syntax, template parsing, compilation, and rendering
- Supports all browsers and Node, supports TypeScript
- Precompilation supports mainstream packaging tools
- Custom configurations, decorators, and functions
- Data filtering support
- Exception capture functionality
- Subtemplates
- Sandbox mode
- Supports JIT and AOT compilation modes
- Provides CLI integrated tools
- Provides support for editor plugins
template.js is a better way than concatenating strings, Click to use codesandbox for a quick demo
Template example
<ul>
<%for(var i = 0; i < list.length; i++) {%>
<li><%:=list[i].name%></li>
<%}%>
</ul>
Data example
const data = {
list: [{ name: 'yan' }, { name: 'haijing' }],
};Render output
<ul>
<li>yan</li>
<li>haijing</li>
</ul>Editor plugins supported by template.js
| Editor | Plugin |
|---|---|
| Vscode | highlight plugin |
| Sublime | highlight plugin |
| Atom | highlight plugin |
| WebStorm | TODO |
Quickly initialize a project using CLI tools
$ npx @templatejs/cli new myapp
# Choose the corresponding platform
# ❯ webpack
# rspack
# vite
# rollup
# esbuild
# parcel2
# parcel1
# fis3
# browserify
# gulp
# browserIf you already have a project, you can choose a corresponding plugin, template.js supports different usage methods
| Platform | Plugin |
|---|---|
| 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 |
| Native web & Node.js | template_js |
| Unsupported platforms | You can write a plugin yourself, please see @templatejs/precompiler |
Other packages summary
- @templatejs/runtime The template.js runtime, providing runtime support for the rendering function generated by precompiler.
- @templatejs/parser The template.js template parser.
- template-vscode The template.js vscode plugin.
This project uses lerna to manage multiple plugins. Common lerna commands are as follows, note that the npx prefix cannot be left out:
$ npx lerna init # Initialize
$ npx lerna create @templatejs/parser # Create a package
$ npx lerna add yargs --scope=@templatejs/parser # Install package dependencies
$ npx lerna list # List all packages
$ npx lerna bootstrap # Install all dependencies
$ npx lerna link # Create all soft links
$ npx lerna changed # List the packages to be updated next time when using lerna publish
$ npx lerna publish # Will tag, upload git, upload npmRelease steps, modify changelog
$ yarn lint
$ yarn build
$ yarn test
$ npx lerna publishRelease without tagging, suitable for test package.
$ yarn lint
$ yarn build
$ yarn test
$ lerna version --no-git-tag-version
$ npx lerna publish from-package --dist-tag next- Baidu Zhidao
- Baidu Jingyan
- Baidu Shifu
- Meituan Waimai
- Yuanfudao
- 58 Financial
- Unisplendour
- Uxin
To learn about who is using this, click here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent