Handlebars模板部署时发布为预编译过的模板函数

SnaiLiu 发布于2019-08-19 14:28 / 2414人阅读

摘要：静态模板文件的内容，如模板等，多为字符串，如果直接部署上线，则需要在线上实时编译，引入的模板引擎也需要包含编译的部分。如果部署时之前先进行模板预编译，则模板文件内容为一个预编译后生成的模板函数。使用进行预编译，有几种方式。

静态模板文件的内容，如 Handlebars模板等，多为字符串，如果直接部署上线，则需要在线上实时编译，引入的模板引擎也需要包含编译的部分。

如果部署时之前先进行模板预编译，则：
1. 模板文件内容为一个预编译后生成的模板函数。
2. 线上的性能更高，因为不再需要实时编译模板。
3. 引入的模板引擎更精简，可以将编译的部分功能去掉。

使用 Handlebars 进行预编译，有几种方式。

首先需要安装 nodejs

具体安装方式可去官网查找，现在 Mac 和 Linux 版也有编译过的 Binaries 文件，不必下载源码编译安装，设置一下 PATH （增加一条，指向 $node_root/bin/），NODE_PATH （指向 $node_root/lib/node_modules/）变量即可，非常方便。

安装 Handlebars

npm install -g handlebars 根据情况决定是否安装到全局。

编译模板文件

按照 Handlebars 官网的说法，只需：handlebars -f 即可。

但是这种方式局限性非常大。
1. 必须在命令行直接使用 handlebars 命令，不太容易配合 build 工具
2. 生成的编译后的模板内容（函数），被直接赋值给了 Handlebars.templates 字典，且 key 被设置为 文件名 ，而非 路径名 或 模块名，容易 命名冲突！这样的话，需要后期自己处理。
这样一来，页面的引用方式会有较大变化，即：

var a, b, tpl = require("./path/to/tpl.tpl");
var tpl = Handlebars.compile(tpl);

变为：

require("./path/to/tpl.tpl");
var tpl = Handlebars.templates["tpl.tpl"];

变化太大，很难用自动化的工具还自动改变引用（除非用很强的书写约定）。

更好的方式：
写一段 compile.js 脚本：

var fs = require("fs");
var h = require("handlebars");

var compiledFn = h.precompile(fs.readFileSync("path/to/tpl.tpl"));
// 根据情况 可以将内容先转换为 seajs 模块，再 writeFile
var content = "define("xx/id",[],function(){return " + compiledFn + "});";
fs.writeFileSync("path/to/dest/tpl.tpl.js", content);

然后再引用的地方只需将 Handlebars.compile 改为 Handlebars.template 即可（根据情况，require 的路径做相应调整）：

var a,b, tpl = require("./path/to/tpl.tpl.js");
var tpl = Handlebars.template(tpl);

下面举一个实例来演示：

开发时的结构可能如下（假设与 seajs 配合）：

__index.html
  |__script
  |  |__index.js
  |__tpl
  |  |__index.tpl
  |__style

index.html 内容如下：

...
seajs.use("./index");
...

index.js 内容如下：

define(function(require){
    // 如果没有引入 seajs-text.js 插件，
    // 则：require("../tpl/index.tpl.js");
    var tplStr = require("../tpl/index.tpl");
    var tplFn = Handlebars.compile(tplStr);

    var context = {
        Title: "Hi, Handlebars!"
    };
    var html = tplFn(context);
});

index.tpl 内容如下：


    {{Title}}

部署时，运行上面提到的 compile.js，之后：
index.html 不变，index.js 内容：

...
// 其实这里已经是编译后的函数了，而非 String
var tplStr = require("../tpl/index.tpl.js");
var tplFn = Handlebars.template(tplStr);
...

index.tpl.js 内容如下：

define("id",[], function(require, exports, module){
    // 或 return function (Handlebars, ...
    module.exports = function (Handlebars,depth0,helpers,partials,data) {
        this.compilerInfo = [4,">= 1.0.0"];
        helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
        var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression;


        buffer += "
  ";
        if (stack1 = helpers.Title) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
        else { stack1 = (depth0 && depth0.Title); stack1 = typeof stack1 === functionType ? stack1.call(depth0, {hash:{},data:data}) : stack1; }
        buffer += escapeExpression(stack1)
          + "
";
        return buffer;
  }
});

转载请注明来自[超2真人]
本文链接：http://www.peichao01.com/static_content/doc/html/Handlebars_precompile.html

GPU云服务器云服务器模板预编译 html新闻发布模板模板函数 js模板扩展函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77994.html

利用 webpack 处理开发与线上环境静态资源切换问题

摘要：但在产品模式下，我们非常有必要在的属性里的里配置一个来变向的为静态资源注入版本号，如下，以便上线之后页面可以引入版本更新后的代码。通过给静态资源注入值来作为版本号的好处主要有两个实现策略。前言 webpack，作为一个处理模块加载、资源依赖管理、构建化的工具，已经逐渐成为了前端工程化领域的新贵。其创造性的把每个静态资源归为一个 module（模块）并能被其强大的 loader 所加载...

RyanHoo 2019-08-20 11:37 评论0 收藏0
Handlebars中文文档（译自官方版）

摘要：使用这段上下文数据会得到如下结果不会再对安全字符串进行编码。的在模板中可以访问任何的上下文。可以通过方法注册一个。使用这个上下文会得到事实上，可以使用表达式在任何上下文中表示对当前的上下文的引用。 Handlebars 为你提供了一个可以毫无挫折感的高效率书写语义化的模板所必需的一切。 Mustache 模板和 Handlebars 是兼容的，所以你可以把Mustache模板拿来...

hikui 2019-08-19 14:22 评论0 收藏0
前端常用插件、工具类库汇总

摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。本人微信公众号：前端修炼之路，欢迎关注本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。另外，感谢白小明，文中很多的工具来源于此。弹出框 layer：http://layer....

GitCafe 2019-08-23 13:57 评论0 收藏0
如何实现一个脚手架进阶版（Vue-cli v2.9学习篇）

摘要：如果没有看过之前一篇博客的，或者对的脚手架没有了解过的同学，推荐先看上一篇如何实现一个简单的脚手架。它是一个用来构建静态网站的类库，也能够用来对文件进行处理。有任何问题欢迎进行交流。前言在之前一篇博客介绍了关于Node脚手架的一些基础的知识，这篇博客是在之前的基础上针对在Node中开发脚手架中遇到的问题，如：终端样式、交互问题文件处理问题通过对Vue-cli 2.9.2的...

thekingisalwaysluc 2019-08-26 11:34 评论0 收藏0
handlebars.js模板引擎

摘要：基于，可以在中导入模板。利用对象函数替换对象或者运行函数支持点语法可以对象等属性值使用时，直接标签引入文件。模块会自动匹配相应的数值，对象或者是函数。也可以单独建立一个模板，或者可以用来唯一确定一个模板，是固定写法，不可或缺。前言：常用的末班引擎有很多，但写法都大同小异。handlebars.js就是一个纯JS库，因此你可以向其他脚本一样用script包起来。调用内部封装好的功能。 ...

SimpleTriangle 2019-08-01 16:20 评论0 收藏0