Handlebars模板部署時發布為預編譯過的模板函數

SnaiLiu 發布于2019-08-19 14:28 / 2469人閱讀

摘要：靜態模板文件的內容，如模板等，多為字符串，如果直接部署上線，則需要在線上實時編譯，引入的模板引擎也需要包含編譯的部分。如果部署時之前先進行模板預編譯，則模板文件內容為一個預編譯后生成的模板函數。使用進行預編譯，有幾種方式。

靜態模板文件的內容，如 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模板擴展函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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