前言
在前端开发过程中，我们常常需要使用一些模板引擎来动态渲染页面，如 Handlebars、EJS 等等，但是这些引擎需要在浏览器中对应的js文件才能工作，这就对前端开发者的文件管理带来了很大的困难。而npm包browserify-underscore-templatify就是为了解决这个问题而诞生的。
什么是browserify-underscore-templatify
browserify-underscore-templatify是一个npm包，它可以把我们前端代码中的html文件一起打包到bundle.js文件中，这样我们就可以在浏览器端使用underscore.js的_.template方法来渲染这些html页面了。
安装与使用
首先，在你的项目文件夹中安装browserify-underscore-templatify。
npm install browserify-underscore-templatify
安装完成后，在项目中添加一个html模板文件，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
------------ -------------
----- ----------------
----- --------------- ---------------------------- -------------------
-------
------
--------- --- ---- --------
-------
-------接下来，在你的js代码中引入browserify-underscore-templatify以及underscore模块，并编写如下代码：
var fs = require('fs');
var template = require('underscore-template');
var templateString = fs.readFileSync(__dirname + '/template.html').toString();
var compiled = template(templateString);
var result = compiled({ name: 'world' });
console.log(result);
以上代码首先使用fs模块读取html模板文件；
接着使用underscore-template模块的template方法将读取到的html文件字符串转化为可执行函数，然后使用_.template对象将这个函数包裹起来；
最后，传递参数生成最终的html字符串，并在控制台中打印出来。
这段代码的输出结果就是：
-- -------------------- ---- -------
--------- -----
------
------
------------ -------------
----- ----------------
----- --------------- ---------------------------- -------------------
-------
------
--------- -----------
-------
-------至此，我们的使用教程就结束了。
指导意义
使用npm包browserify-underscore-templatify可以有效地简化前端代码文件的管理，同时也可以提高开发效率。在日常工作中，我们需要根据实际情况选择合适的模板引擎来进行开发，在这个过程中稍加改动即可轻松切换前端模板引擎，减轻了我们维护代码的难度。
var fs = require('fs');
var template = require('underscore-template');
var templateString = fs.readFileSync(__dirname + '/template.html').toString();
var compiled = template(templateString);
var result = compiled({ name: 'world' });
console.log(result);总之，browserify-underscore-templatify非常适用于前端开发时对模板引擎的需求。个人认为，它在前端开发中有着非常广泛的应用前景，尤其是在需要进行数据可视化的场合，它的功能更是相当强大。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde5482