• Stars
    star
    1,319
  • Rank 35,659 (Top 0.8 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A javascript template engine, simple, easy & extras, support webpack, rspack, vite, rollup, esbuild, parcel, browserify, fis and gulp.

template.js

Build Status license

一款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简介

开发者指南

本项目使用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

贡献者列表

contributors

更新日志

CHANGELOG.md

计划列表

TODO.md

谁在使用

想了解都有谁在使用,点击这里

相关链接

More Repositories

1

zepto.fullpage

Focusing on the fullPage.js for mobile terminals.
CSS
2,100
star
2

jslib-base

A modern JavaScript|Typescript library scaffolding, modularity, purity & extras
JavaScript
943
star
3

vertical-center

水平垂直居中,这是一道面试必考题,^_^
HTML
443
star
4

data.js

data.js 是带有消息通知的数据中心,我称其为会说话的数据。旨在让编程变得简单,世界变得美好。
JavaScript
380
star
5

lodjs

JavaScript模块加载器,基于AMD。迄今为止,对AMD理解最好的实现。
JavaScript
290
star
6

Painter

Drawing program based on HTML5 Canvas.
HTML
229
star
7

fis3-base

基于fis3的纯前端解决方案,拿来即用的fis3脚手架
JavaScript
173
star
8

yanhaijing.github.io

公众号: 颜海镜,《现代JavaScript库开发:原理、技术与实战》作者
JavaScript
111
star
9

console.js

console.js is a small javascript library, fix console is undefined
JavaScript
75
star
10

es5

ecmascript 5 中文版 + es合集
HTML
70
star
11

loveTimeline

记录你的爱情时光轴
JavaScript
62
star
12

gitbook-boilerplate

一个基于gitbook快速写电子书的模版,支持html、pdf、docx、epub、mobi
JavaScript
56
star
13

inverter

变色方块小游戏
JavaScript
53
star
14

snake

贪吃蛇游戏
HTML
44
star
15

color

看你有多色
JavaScript
39
star
16

linklink

连连看游戏
JavaScript
37
star
17

allorigin

万物起源
CSS
23
star
18

zepto.slider

基于zepto的移动图片轮播插件
JavaScript
21
star
19

mywallet

我的钱包
HTML
18
star
20

fan1xia

fan1xia is a game like window 7's little games
HTML
15
star
21

imagic

15
star
22

coupling

7种耦合关系的demo
HTML
14
star
23

postcss-custom-unit

[PostCSS] plugin custom unit
JavaScript
14
star
24

video-demo

各种播放视频demo
HTML
14
star
25

sand.js

Build the world with sand.js
TypeScript
13
star
26

dom.js

focus dom,focus future
JavaScript
12
star
27

fis-parser-template

template.js的fis编译插件——一款javascript模板引擎
JavaScript
12
star
28

zepto.tab

Zepto tab 插件
JavaScript
12
star
29

mygrunt

JavaScript
12
star
30

basejs

JavaScript简易教程
CSS
11
star
31

rspack-cra

create-react-app 迁移 rspack 示例
JavaScript
10
star
32

awesome-windows

前端开发者的windows软件集合
9
star
33

async-demo

异步编程那些事
JavaScript
9
star
34

radixConvert

进制转换小工具
JavaScript
9
star
35

zepto.carousel

基于Zepto的移动旋转木马插件
JavaScript
9
star
36

switch-env

JavaScript
8
star
37

template-loader

template.js的webpakc编译loader——一款javascript模板引擎
JavaScript
7
star
38

LuLanguageCompiler

词法编译器
C++
6
star
39

jquery.imagesScrolling.js

jquery 图片滚动插件
JavaScript
6
star
40

rem

Rem布局的原理解析demo
HTML
5
star
41

mysublime3

我的sublime text 3 配置
4
star
42

grunt-cssformat

format indent of css file
JavaScript
4
star
43

cdkit

code kit 代码助手
JavaScript
3
star
44

spring

青丝集
JavaScript
3
star
45

myProject

我的项目展览
HTML
2
star
46

phoneManager

电话留言版
C++
2
star
47

ppt

网页ppt
JavaScript
2
star
48

player

视频播放器
JavaScript
1
star
49

mysublime

JavaScript
1
star
50

postcss-base

CSS
1
star
51

candify

JavaScript
1
star
52

huaqi-base

HTML
1
star
53

resume-latex

TeX
1
star
54

rspack-vue

JavaScript
1
star
55

snake-app

贪吃蛇,html5版
1
star
56

webp

webp相关demo
1
star
57

react-base-root

JavaScript
1
star
58

timer

计时器
JavaScript
1
star
59

angular2react

TypeScript
1
star
60

YanADKAP

颜海镜汇编库
Assembly
1
star