template.js

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

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

Render output

<ul>
  <li>yan</li>
  <li>haijing</li>
</ul>

Editor plugins supported by template.js

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
#   browser

If you already have a project, you can choose a corresponding plugin, template.js supports different usage methods

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:

$ 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

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

Release 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

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.

Related Links

• BaiduTemplate
• artTemplate
• Juicer
• handlebarsjs
• PUG(Originally Jade)
• EJS
• Only 20 lines of Javascript code! A step-by-step guide to creating a webpage template engine