template.js

English | 简体中文

A javascript template engine that is simple, easy to use, and supports webpack, rspack, vite, esbuild, rollup, parcel, browserify, fis, and gulp.

Features

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

User Guide

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

js
const data = {
  list: [{ name: 'yan' }, { name: 'haijing' }],
};

Render output

html
<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

bash
$ npx @templatejs/cli new myapp
# Choose the corresponding platform
# ❯ webpack
#   rspack
#   vite
#   rollup
#   esbuild
#   parcel2
#   parcel1
#   fis3
#   browserify
#   gulp
#   browser

If 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.

Developer Guide

This project uses lerna to manage multiple plugins. Common lerna commands are as follows, note that the npx prefix cannot be left out:

bash
$ 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 npm

Release steps, modify changelog

bash
$ yarn lint
$ yarn build
$ yarn test
$ npx lerna publish

Release without tagging, suitable for test package.

bash
$ yarn lint
$ yarn build
$ yarn test
$ lerna version --no-git-tag-version
$ npx lerna publish from-package --dist-tag next

Contributors List

contributors

Changelog

CHANGELOG.md

Planned Feature List

TODO.md

Who is Using

Baidu Zhidao
Baidu Jingyan
Baidu Shifu
Meituan Waimai
Yuanfudao
58 Financial
Unisplendour
Uxin

To learn about who is using this, click here.