基于Handlebars的最新版本实现Handlebars的预编译语言&工具

来源:互联网 / 作者:SKY / 2017-12-01 05:40 / 点击:
本日我们着中讲下怎样预编译Handlebars模板,众所周知,假如在运行时去编译一些对象长短常影响机能的,Handlebars同样云云,假如每次都在加载页面的时辰,在js中

至于Handlebars是什么东东,这里就不做过多表明,可以参照本站课程进修恶补。。。。

Handlebars入门课程传送门:

本日我们着中讲下怎样预编译Handlebars模板,众所周知,假如在运行时去编译一些对象长短常影响机能的,Handlebars同样云云,假如每次都在加载页面的时辰,在js中通过Handlebar.compile(template_source)的话,假如模板简朴就不说了,假如模板很是伟大,浮夸点说,让客户端的赏识器未相应也不是不行能。

好了,闲扯淡到此为止,开始下手。

从Handlebars的官网 我们可以相识到,要实现Handlebars的预编译很是简朴,只必要通过npm 安装他的npm包就可以了 npm install -g handlebars  (啥?npm不知道是啥?好吧,自行百度/google) .

这时辰,handlebars的模板也不消再像入门教程中写的那样通过script标签嵌在Html的页面中了,我们必要把对应的模板写在对应的模板文件内里,handlebars的模板文件就是以.handlebars扩展名末了的文件。好比有如下文件

sample.handlebars

其内容如下:

<divclass="container">

<divclass="row">

<divclass="col-sm-2">名字

<divclass="col-sm-10">{{name}}

</div>

</div>

Note: 这时辰,模板内容就不消再包括在script标签中了。

然后只要在呼吁行如下呼吁即可 handlebars sample.handlebars -m -f  sample.hbs.js

这里我们对handlebars的呼吁做下简朴的先容,详细的可以参考github上的 https://github.com/wycats/handlebars.js/  

Precompiling Templates

sample.handlebars 是输入源 文件,也就是我们写的模板文件

-m  参数拭浇椁编译后压缩文件

-f   拟定输出文件路径

sample.hbs.js  就是-f参数拟定的输出文件

到此,Handlebars的预编译进程就完成了,我们可以通过在html中引入handlebars.js 和预编译后的sample.hbs.js我们就可以随便的行使预编译后的模板了!!!!

那到底怎么行使这个预编译后的模板呢?

要想清晰怎么行使,我们就应该先相识这个预编译到底做了什么,着实也没有什么隐秘的,预编译就是在Handlebars这个工具的templates工具中插手了我们编写的sample.handlebars文件同名的一个工具,这样我们就可以再我们的代码中通过Handlebars.templates.sample(contex,options)来挪用我们界说的模板了。

到此这篇文章原来就可以竣事了,可是,我们上面引用的是handlebars.js这个文件,这个文件未压缩的环境下有140K,官方给出了其它一个可以进一步节省带宽,并且越发得当移动端加载的方案,那就是行使体积更小的runtime文件,也就是handlebar.runtime.js这个文件,这个文件在未压缩的环境下也只有24K,可是官方并没有给出这个文件,必要我们自行build handlebars的工程来得到。

查察gibhub上Handlebars的工程布局我们可以相识到,他的工程是通过node+grunt来构建的,这样我们就只必要通过grunt 呼吁来build下就可以了。(啥?node和grunt不知为何物?好吧,百度/google自行进修之)

1. 起首从github上把handlebars的工程check out出来,这个就不多说了

2. 在检出的工程更目次下打开呼吁行 执行npm install 这个就是把设置在package.json中的依靠下载到工程中

3. 上述事变完成后,我们可以搜查下Gruntfile.js中有哪些task,虽然我们的方针是去查找有没有build这样的task, 找到后,在呼吁行中输入grunt build ,当看到Done ... 这样的字样时,OK, 大功告成!

4. 编译竣事后,我们就可以再dest 目次中看到handlebars.runtime.js这个文件了。

好了,获得runtime文件后,我们就可以替代上面中的handlebars.js了。

阅读延展

1
3